CSS box-sizing: border-box

box-sizing Explained

• content-box (default) — width/height = content only. Padding and border are ADDED on top. Width: 300px + padding: 20px each side = 340px actual width
• border-box — width/height INCLUDES padding and border. Width: 300px with 20px padding = 260px content + 20px+20px padding = 300px total
• Why border-box is better — Set width: 50% and it really is 50% — padding doesn't push it wider. Layouts are predictable
• Universal reset — * { box-sizing: border-box; } — Apply to ALL elements. Used by Bootstrap, Tailwind, and every modern framework
• Margin is NEVER included in box-sizing — Both content-box and border-box exclude margins. Margins are always extra
• This is the first rule in every professional CSS file — Without it, responsive layouts break constantly

box-sizing Comparison

/* The universal box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Without border-box (content-box — default): */
.card-content-box {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* Actual width: 300 + 40 + 4 = 344px 😱 */
}

/* With border-box: */
.card-border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  /* Actual width: 300px exactly ✅ */
  /* Content area: 300 - 40 - 4 = 256px */
}

/* Real-world impact on layouts: */
.two-columns {
  display: flex;
}
.column {
  width: 50%;     /* Exactly 50% with border-box */
  padding: 20px;  /* Padding is inside the 50%! */
  /* Without border-box, each column would be 50% + 40px — BROKEN */
}

Tip

Common Mistake

Quick Quiz