CSS box-sizing: border-box
box-sizing: border-box is one of the most important CSS declarations. It changes how width and height are calculated — including padding and border in the specified dimensions. Every modern CSS reset starts with this rule.
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
The universal box-sizing reset (*, *::before, *::after { box-sizing: border-box; }) should be the FIRST rule in every CSS file. It prevents width-calculation surprises and is used by every major CSS framework including Bootstrap and Tailwind.
Every element follows the box model — content + padding + border + margin
Common Mistake
Assuming margin is affected by box-sizing — it never is. Both content-box and border-box exclude margins from the width calculation. Margins are always additional space outside the element's border, regardless of the box-sizing setting.
Quick Quiz
Key Takeaways
- box-sizing: border-box is one of the most important CSS declarations.
- 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