The CSS Box Model

Basic

The CSS Box Model describes the space around a box as nested edges: content, padding, border, and margin. It is the model you use when you need to answer questions such as “where does this space come from?” or “why is this element farther from its neighbor?”

This lesson owns the box edges and the spacing created by padding and margins. Display and Flow Layout explain how boxes participate in layout; Sizing will explain how preferred, minimum, and maximum dimensions are calculated. Backgrounds and Borders owns the detailed border, radius, background, and shadow features.

See the four box edges

Start from the content and move outward. The content edge surrounds the content area. Padding adds space inside the border. The border is the box edge drawn around that padding. The margin is outside the border and separates the box from neighboring layout participants.

1
2
3
4
5

.card {
  padding: 1rem;
  border: 4px solid;
  margin: 2rem;
}

These are not four interchangeable kinds of “space.” Padding belongs to the box and is part of the area through which its background can paint. Margin is outside the border and does not become part of the element’s background painting.

?

Padding belongs to the box

Padding increases the space between content and the border. Its four sides can be controlled independently, with physical properties such as padding-top or with the shorthand padding. Padding cannot be negative.

1
2
3
4

.panel {
  padding-block: 1rem;
  padding-inline: 1.5rem;
}

Padding is useful when the space should travel with the component. If the panel gets a different background, the padded area remains part of that panel rather than becoming a gap between unrelated boxes.

?

Margin belongs to the outside

Margins create space outside the border. They are not painted as part of the element’s background, and they can affect how neighboring boxes are positioned in layout. Each side can be specified independently or with the margin shorthand.

1
2
3
4

.card {
  margin-block: 1rem;
  margin-inline: auto;
}

The value auto has special behavior in particular layout contexts. Do not turn this lesson into a centering recipe: the Box Model owner explains what margin is; the relevant layout module determines how auto margins participate in its algorithm.

?

When adjacent vertical margins collapse

In normal flow, adjoining block-axis margins can collapse rather than simply adding together. For example, a 2rem bottom margin and a 1rem top margin can produce a 2rem separation, not 3rem.

Collapsing is about margins that are adjoining under the rules of the layout model. It is not a universal “vertical margins always collapse” rule. Padding, borders, different formatting contexts, and other conditions can prevent two margins from being adjoining.

?

Parent and child margins can collapse too

A child’s block-start or block-end margin can sometimes collapse with the corresponding margin of its parent. This is one reason a margin can appear visually outside a parent even though the declaration is on the child.

Do not “fix” a surprising result by memorizing a list of hacks. First identify whether the margins are adjoining. Then look for the feature that separates them, such as padding, border, or a different formatting context.

1
2
3
4
5
6
7

.card {
  /* No padding or border separates this edge. */
}

.card > p {
  margin-block-start: 2rem;
}

?

Borders are an edge, not a second spacing system

The border sits between padding and margin. Its width contributes to the box’s outer geometry, but detailed border styles, colors, radii, and border-image behavior belong to the Backgrounds and Borders lesson. Here, you only need the edge model: content → padding → border → margin.

?

Do not confuse the box model with sizing

The box model tells you what the edges mean. It does not by itself teach every algorithm that determines a box’s used width or height. In particular, the CSS Sizing module owns sizing properties and algorithms such as width, height, min/max constraints, intrinsic sizes, and box-sizing.

A practical spacing diagnosis

When a gap looks wrong, identify its edge before changing CSS. If the gap is inside the border, inspect padding. If it is outside the border, inspect margin. If the visible edge itself is wrong, inspect the border rules. If the box’s dimensions are wrong, move to the Sizing owner rather than adding arbitrary padding or margin.

?

The important boundaries

• Display owns box generation and the outer/inner display roles; it does not own padding or margin.

• Flow Layout owns normal-flow participation; this lesson owns the margin-collapsing behavior used by that layout.

• Sizing owns width, height, min/max constraints, intrinsic sizing, and box-sizing; this lesson does not duplicate those algorithms.

• Backgrounds and Borders owns detailed border painting and border decoration; this lesson only establishes the border edge in the box model.

• Positioned Layout, Flexbox, Grid, and other layout modules determine how margins participate in their own algorithms.

The normative baseline for this lesson is the W3C CSS Box Model Module Level 3 Recommendation, with Level 4 as a developing Working Draft. The W3C CSS Working Group specifications for Sizing and Backgrounds and Borders define the adjacent responsibilities described above.

Quick review

You should now be able to identify the four box edges, distinguish padding from margin, reason about adjoining margin collapse, and know when a problem belongs to Sizing or another layout module instead of Box Model.