Explainer1 min readUpdated June 29, 2026

What is the CSS box model?

Short answer

In CSS, every element is a rectangular box with four layers: the content, the padding around it, the border around that, and the margin outside. The box model defines how those layers add up to the element's total size.

The four layers

content — the text or image itself, sized by width and height
padding — space inside the box, between content and border
border — the line around the padding
margin — space outside the box, separating it from neighbors

[ margin [ border [ padding [ content ] ] ] ]

Layers from inside out

Why box-sizing matters

By default (content-box), width sets only the content, so padding and border are added on top and make the box wider than you asked. Setting box-sizing: border-box includes padding and border within the width, which is far more predictable for layouts.

* { box-sizing: border-box; }

A common reset

Margins can collapseVertical margins between blocks can collapse into a single margin rather than adding together. This surprises people debugging spacing between stacked elements.

Try it: HTML/CSS PlaygroundExperiment with padding, border, and margin live in an HTML and CSS playground.Open tool

References

The box model on MDN — MDN

Questions

What is the difference between padding and margin?

Padding is space inside the element, between its content and border, and it shares the element's background. Margin is space outside the border that separates the element from its neighbors.

Should I always use border-box?

Most developers set box-sizing: border-box globally because it makes widths include padding and border, which keeps layouts predictable. It is a very common default.

Does this send my data anywhere?

No. Utilumo's developer tools parse and transform input inside the browser tab. Nothing is uploaded, stored, or logged.