Box model (CSS)

The CSS box model describes how every element on a page is rendered as a rectangular box, built from four layers: content, padding, border and margin. Together they decide how big an element is and how much space surrounds it, so the box model is the foundation of all CSS layout.

The four layers

• Content: the text or image itself, sized by width and height.
• Padding: the space between the content and the border, inside the box.
• Border: the line around the padding.
• Margin: the space outside the border, separating the element from its neighbours.

You can inspect all four in any browser's dev tools, where the box model diagram shows each layer's pixel value.

box-sizing: content-box versus border-box

The box-sizing property decides whether width and height include padding and border. The difference is the single most common source of sizing surprises.

Most projects set box-sizing: border-box globally with *, *::before, *::after { box-sizing: border-box; }.

Margin collapsing

Vertical margins between two block elements can collapse into a single margin equal to the larger of the two, rather than adding up. It is expected behaviour but often surprising, and it does not happen inside a flex or grid container.

Common issues and best practices

Most sizing surprises come from the default content-box behaviour. Set box-sizing: border-box once, use padding for inner space and margin for outer space, and keep values on a consistent scale so spacing stays predictable.

The box model and modern layout

Flexbox and grid change how spacing is best handled: their gap property spaces children without the pitfalls of collapsing margins, so reaching for gap instead of per-item margins keeps layouts cleaner and easier to maintain.

The box model at BeBranded

At BeBranded we build on a consistent box-sizing base so spacing stays reliable across every screen and component. It is part of the clean, maintainable front-end in our design work.