CSS content box

The CSS content box is the innermost box region bounded by the content edges, inside padding, border and margins. It is the area assigned for the box's content by the applicable layout rules.^[ref]

Suppose the content width is $120$ CSS pixels, with eight-pixel left/right padding and two-pixel left/right borders. Then the CSS padding box width is $136$ and the CSS border box width is $140$ pixels. Six-pixel margins on both sides increase the CSS margin box width to $152$ pixels. These are different measurements of the same simple box, not competing answers to one unspecified width question.

With box-sizing: content-box; width: 120px, the declared width requests that content dimension. With box-sizing: border-box; width: 120px and the same padding and borders, the requested border dimension instead leaves $120-16-4=100$ pixels for content, before any further constraints.

A content area is not a guarantee that all painted content fits inside it. A long unbroken item or a descendant can cause CSS overflow. Also, an ordinary inline element can fragment across CSS line boxes; its geometry should not be reduced to one fixed-width rectangle merely because a width declaration appears in its style. Read the content region together with CSS box-sizing, box kind and the layout context.