The CSS Box Model Explained (2026)

Quick answer: The CSS box model treats every element as a box built from four layers: content, padding, border and margin. Set box-sizing: border-box on everything so a width includes padding and border, which is what most people expect. Use CSS logical properties such as margin-inline and padding-block so the layout adapts to writing direction.The sections below take the CSS box model apart in the order that explains it: the four layers, why box-sizing changes the arithmetic, margin collapse, and logical properties — the four places where the CSS box model surprises people.

The four layers of the CSS box model

Picture a framed photo. The photo is the content, the mat around it is padding, the frame is the border, and the wall space between frames is the margin. Working from the inside out:

• Content — the text or image itself, sized by width and height.
• Padding — space inside the element, between content and border.
• Border — the visible edge, with its own width and colour.
• Margin — space outside the element, pushing neighbours away.

.card {
  width: 320px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  margin: 16px;
}

Why box-sizing: border-box matters

By default, width sets only the content width. Add padding and a border, and the element grows wider than the number you wrote. That surprise is the source of countless overflow bugs when you put a padded box in a fixed-width column.

/* wrong mental model: this renders 320 + 48 + 2 = 370px wide */
.card { width: 320px; padding: 24px; border: 1px solid; }

/* border-box: width includes padding and border, so it renders 320px */
*, *::before, *::after { box-sizing: border-box; }

That universal rule is the first line of nearly every modern stylesheet. With border-box, width: 320px means 320 pixels total — what you would write on a napkin. Fall back to content-box only when you deliberately want padding added on top.

Margin collapse, the other surprise

Vertical margins between adjacent block elements do not add up — they collapse to the larger of the two. A paragraph with a 16px bottom margin followed by one with a 24px top margin ends up 24px apart, not 40px. This is by design and it trips up almost everyone once.

• Collapsing happens on vertical margins only, and only between block elements in the same normal-flow context.
• A parent and its first or last child can collapse too, which is why a child’s top margin sometimes seems to escape its container.
• Flush layouts avoid the confusion: use gap in flex or grid containers, or set margins on one side only, instead of fighting collapse.

.stack {
  display: grid;
  gap: 1rem;          /* no margin collapse ever */
}

Logical properties for direction-agnostic layout

Physical properties such as margin-left assume left-to-right text. Logical properties describe the same space relative to the writing direction, so the same rule works for right-to-left languages and vertical writing modes.

.button {
  padding-block: 0.5rem;        /* top and bottom */
  padding-inline: 1rem;         /* start and end */
  margin-inline-start: 0.5rem;  /* left in LTR, right in RTL */
}

You do not have to convert an existing project. Start using logical properties on new components, especially anything with a two-value shorthand such as margin: 0 auto, and the layout becomes direction-agnostic for free.

Reading the CSS box model in DevTools

Every browser’s inspector draws the four layers as nested rectangles with their computed numbers. When a layout looks wrong, that diagram is the fastest answer: it shows exactly how much padding, border and margin actually applied, including any that came from a shorthand you did not intend.

Next: Flexbox, the one-dimensional layout tool. To learn CSS layout with a mentor, Ampersand Academy teaches web development one-to-one.

Frequently asked questions