= CSS box model
{c}
The <CSS box model> describes the content, padding, border and margin regions used to lay out generated boxes. These define a <CSS content box>, <CSS padding box>, <CSS border box> and <CSS margin box> respectively. A box's declared width must be interpreted together with the applicable sizing rules.<Box model in CSS 2.2 by W3C>[§8.1, box dimensions and the four edges]{ref}
For a simple horizontal box with content width $w$, left/right padding $p_l,p_r$, border widths $b_l,b_r$ and margins $m_l,m_r$, the total margin-box width is
$$
w+p_l+p_r+b_l+b_r+m_l+m_r.
$$
With $w=100$, padding ten on each side, borders two on each side and margins ten on each side, the total is 144 <CSS pixels>. Its border box is 124 pixels wide.
<CSS box-sizing> changes which area a width declaration sizes. With the same padding and borders but `box-sizing: border-box; width: 100px`, the border box is 100 pixels and the content width is 76 pixels in this example. Margins are still outside that declared border-box size.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[Box-sizing and sizing-edge definitions]{ref}
The example assumes ordinary nonnegative fixed horizontal values. Vertical margins can participate in <CSS margin collapsing>, and an inline element split across lines can generate several fragments. The box model supplies the regions; the formatting context determines how particular boxes are generated and positioned.
Back to article page
