Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
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