BitWithBite
Full-Stack · Quick Reference
Lesson 8 — Box Model Cheat Sheet
In one line: Every element is a box made of content, padding, border, and margin — box-sizing:border-box makes width calculations sane.
The Four Layers
1Content. The actual text/media.
2Padding. Space inside the border.
3Border. The line around the padding.
4Margin. Space outside the border, between elements.
5box-sizing: border-box. Width includes padding+border, not just content.
The Fix Everyone Uses
*, *::before, *::after {
box-sizing: border-box;
}
width:200px + padding:20px (content-box)
Rendered width: 240px
width:200px + padding:20px (border-box)
Rendered width: 200px