Reference guide · html-css-js · Published 2026-08-15 · 4 min read
The CSS box model
The CSS box model explained: content, padding, border and margin, border-box sizing, and why margins collapse.
- ·The four boxes
- ·Border box sizing
- ·Collapsed margins
The four boxes in every element
There is no such thing as a CSS element without a box. The browser wraps each element in four concentric layers: content, padding, border, and margin. The content box holds the actual text and images, padding is the breathing room around them, the border draws a line around the padding, and the margin separates the element from its neighbours.
| Layer | What it does | Where it traps space |
|---|---|---|
| Content | The text or replaced element | In the middle |
| Padding | Space inside the border | Counts toward element size |
| Border | Visible edge around the padding | Counts toward element size |
| Margin | Space outside the border | Outside, it collapses |
The content-box versus border-box trap
box-sizing decides which widths the width property counts.
content-box(default):widthapplies to the content box only, so the real rendered width is content plus padding plus border.border-box: the declaredwidthincludes content, padding and border. The content box shrinks to make room.
/* Default: a 200px-wide card with 20px padding renders at 240px */
.card { width: 200px; padding: 20px; }
/* border-box: the 200px is the total, including padding */
* { box-sizing: border-box; }
.card { width: 200px; padding: 20px; }Without border-box, two buttons next to each other in a grid with different padding values render at different widths no matter how carefully the widths match. Setting box-sizing: border-box on everything is the standard reset, because it makes a width promise that includes the box. It is one of the highest-impact decisions in CSS, and it alone fixes a whole class of layout drift bugs. The remaining overflows usually come from images, handled in the image aspect ratio guide.
When margins collapse
Adjacent vertical margins collapse: the larger of the two wins instead of the two adding. A heading with margin-bottom: 24px followed by a paragraph with margin-top: 16px leaves 24px between them, not 40px. The same happens between a parent and its first child when there is no border, padding, or content in between, which is why a child margin-top can push the parent instead of just spacing inside it.
The effect is easy to mistrust until you see it. The fix is to make the spacing one-sided, using margin on only one side of a pair, so there is nothing to collapse. When a parent must keep its own spacing, add a small padding or a border-top: 1px solid transparent, or use the modern display: flow-root on the parent to contain the collapsing.
A box-model table for quick reference
| Task | Use |
|---|---|
| Space inside an element | padding |
| Space between siblings | margin (watch collapse) |
| A visible edge | border |
| Match an exact rendered size | box-sizing: border-box |
| Debug why a box is wider than expected | Computed panel, check the box model view |
Common spacing bugs and their causes
- Element renders wider than the width you set: content-box sizing plus padding.
- Buttons in a row misalign: different padding or border widths, usually from content-box.
- Space above a section that shrinks: top margin of the first child collapsed through the parent.
- Long words overflow the card: missing
min-width: 0on flex children, because flex children default to a content-sized minimum width.
Verify your fix
In inspect mode, the computed styles tab shows the full box model for the selected element: the blue content area, the green padding, the yellow border, and the orange margin, with pixel numbers for each. A layout bug is usually one of two things: the wrong layer has the space, or the wrong number is what you think a width includes. When you know which, the fix is one rule. The box model is the ground level of CSS, and the specificity article covers the layer above it, where two rules fight over one property.