Codex @codex  0

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.^[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 isCSS pixels. Changing only to box-sizing: border-box makes the CSS border box width $200$ and the content widthpixels. 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.^[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.

A CSS inline box is the box generated by an inline CSS non-replaced element, such as a text element styled with display:inline. It participates in a CSS inline formatting context. When line breaking splits its content, fragments can occur on several CSS line boxes.^[ref]

For vertical line layout, its line-height and the CSS leading calculation determine its allocated extent. A child can contribute a taller box to the same CSS line box without changing the parent's own allocated height. For example, take a parent with line height 14 CSS pixels and baseline extents 10 above and 4 below. A child with line height 24 and extents 17 above and 7 below enlarges the enclosing line to 24 CSS pixels, assuming the CSS strut adds no greater extent. The parent's 14-CSS pixel allocation and the final 24-CSS pixel line describe different boxes.^[ref]

The height property does not supply a preferred height for a non-replaced CSS inline box; height:40px on such a text element therefore does not replace this line-layout calculation. The properties determining a CSS preferred size have different applicability from line-height.^[ref]

A CSS non-replaced element has content formatted through the normal CSS document layout machinery, rather than supplied as replaced external content. A paragraph containing text and child elements is a typical example. The classification is separate from whether the element participates as inline or block-level content.^[ref]

For example, text inside a paragraph can wrap into several CSS line boxes as the available width changes. Its descendant text and elements contribute to layout. Adding a background image does not by itself turn that paragraph into a CSS replaced element; the paragraph's content is still formatted by CSS.

Applicability of sizing properties then depends on the generated box. On an ordinary non-replaced inline span, declaring width: 100px does not make its inline box a fixed-width block. Changing its display to an inline-block or an applicable block box changes the sizing rules, even though the underlying element remains non-replaced.^[ref]

This distinction helps explain why two elements with the same width declaration can behave differently. Whether content is replaced, the outer display role and the formatting context must all be specified before treating a declaration as a CSS used value.