= CSS box-sizing
{c}
<CSS box-sizing> is the `box-sizing` property that selects which box edge applicable length and percentage sizes refer to. With `content-box`, such sizes describe the <CSS content box>; with `border-box`, they include padding and borders in the <CSS border box>. Margins remain outside both.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[§3.3, Box Edges for Sizing: content-box and border-box]{ref}
For example, use `width: 200px; padding: 16px; border: 2px solid`, with no other constraints. Under content-box sizing, the content width is $200$ and the <CSS border box> width is
$$
200+2(16)+2(2)=236
$$
<CSS pixels>. Changing only to `box-sizing: border-box` makes the <CSS border box> width $200$ and the content width
$$
200-2(16)-2(2)=164
$$
pixels. This is why a width declaration cannot be interpreted independently of its sizing edge.
The content width cannot become negative. If the declared border-box width is only $20$ pixels but total horizontal padding and borders require $36$, the content width floors at zero and the actual border box is $36$ pixels wide. Border-box sizing does not make arbitrarily thick padding disappear.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[§3.3, zero floor on inner size and padding-plus-border overflow example]{ref}
<CSS box-sizing> changes size interpretation rather than making every property apply to every box. A <CSS non-replaced element> generating an ordinary inline box still has its width applicability rules. <CSS minimum size>, <CSS maximum size> and the surrounding layout also remain relevant to the final <CSS used value>.
Back to article page
