HTML & CSS
Box Model
The rules that determine how an element's content, padding, border, and margin take up space.
Reviewed by the RadarTrek editorial team · June 2026
Every HTML element is rendered as a rectangular box. The CSS box model describes how that box's total size is built up: content, then padding (space inside the border), then the border itself, then margin (space outside the border, between elements). Misunderstanding this is the source of most early layout confusion.
Why it matters
- —Every layout bug — things overlapping, spacing looking wrong — traces back to the box model.
- —box-sizing: border-box (commonly used) changes how width and padding interact, simplifying sizing.
- —Margin collapses between elements in ways that surprise beginners — worth learning explicitly.
Where to learn this
🎓
The Box Model
CSS Fundamentals course
This is the exact lesson that covers this term in depth — with examples, diagrams, and a hands-on exercise.