= CSS inline box
{c}
A \b[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>.<Visual formatting model in CSS 2.2 by W3C>[§§9.2.2 and 9.4.2, inline boxes and splitting across lines]{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.<Visual formatting model details in CSS 2.2 by W3C>[§10.8.1, inline-box height and independent contributions of child 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`.<CSS Box Sizing Module Level 3 by World Wide Web Consortium>[§3.1.1, applicability of preferred width and height properties]{ref}
Back to article page
