= CSS content box
{c}
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.<Box model in CSS 2.2 by W3C>[§8.1, content edge and content box]{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.
Back to article page
