content-box vs border-box

The box-sizing property determines what is included in width and height calculations. Content-box (default) is confusing; border-box (modern best practice) includes padding and borders in the width.

The Difference

Property	Includes	Width Calculation
content-box	Only content	width + padding + border
border-box	Content + padding + border	width = total

CSS

/* Content-box (default, confusing) */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  box-sizing: content-box;
  /* Total width = 200 + 20 + 20 + 2 + 2 = 244px */
}

/* Border-box (modern, predictable) */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
  box-sizing: border-box;
  /* Total width = 200px (includes everything) */
}

Why Border-Box Matters

CSS

/* Problem: content-box overflow */
.container {
  width: 100%;
}

.box {
  width: 100%;
  padding: 20px;
  /* Total = 100% + 40px (exceeds container!) */
}

/* Solution: use border-box */
.container {
  width: 100%;
}

.box {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  /* Total = 100% (fits perfectly) */
}

/* Best practice: apply globally */
*,
*::before,
*::after {
  box-sizing: border-box;
}

Note

Always use box-sizing: border-box. It makes sizing predictable and prevents overflow issues. Apply it globally to all elements.

Margin collapse: [Margin Collapse](/css/margin-collapse).