By Rahul — Google Frontend Engineer
Every Element is a Box
Every HTML element is a rectangular box. The box model defines how the element's size is calculated from four layers: content, padding, border, and margin.
content-box vs border-box
This is the most important thing to understand about the box model.
content-box (default)
border-box (what you should use)
The Universal Reset
Margin Collapse
Vertical margins collapse — they do not add up. This confuses everyone.
Margins do NOT collapse when:
- Elements are flex or grid children
- Elements are floated
- Elements have overflow other than visible
- Horizontal margins (left/right never collapse)
Common Production Issues
100% Width Plus Padding
Outline vs Border
outline does NOT affect the box model. It does not take space. border does. Use outline for focus indicators that should not shift layout:
Inspecting the Box Model
Chrome DevTools shows the box model visually when you select an element. The colored overlay shows content (blue), padding (green), border (yellow), and margin (orange). Use this constantly when debugging layout.
Summary
The box model has four layers: content, padding, border, margin. Always use box-sizing: border-box. Vertical margins collapse. Understanding this prevents 90% of CSS layout bugs.