Box model

Definition

Every element generates a rectangular box made of four nested areas: the content box, the padding around it, the border around that, and the margin outside the border. Together they determine how much room the element takes.

Where the width is measured

Under the default content-box value, a declared width applies to the content area alone, so padding and border are added on top. An element set to width: 100% with padding therefore overflows its container. Setting box-sizing: border-box makes the declared width include padding and border, which is why most projects apply it globally as their first rule.

Margins are not part of the box

Margin creates space outside the border and is excluded from both width calculations. Vertical margins between siblings also collapse into a single margin rather than adding together, which surprises people who expect the sum.

The commonest overflow cause

Horizontal overflow at narrow viewports is very often this: a percentage width plus padding under the default box sizing. Before hunting for a layout bug, check the computed box in developer tools, where each of the four areas is shown separately.

Common failures

• A full-width element with padding under content-box.
• Collapsed margins mistaken for a missing margin.
• Fixed pixel widths that ignore the container.
• Borders added late, pushing a fitted layout over its bounds.
• Images without a maximum width breaking their box.

Review question

Inspect the element and read the four areas separately. Is the overflow coming from content, padding, border, or margin? Naming the area first makes the fix obvious.