= CSS line box
{c}
A \b[CSS line box] is the rectangular region containing the inline content of one line in a <CSS inline formatting context>. The browser fits successive inline content into lines, using <line breaking> when necessary, then uses <CSS vertical alignment> to determine each line's extent. A <CSS inline box> supplies one contribution to this enclosing region.<Visual formatting model in CSS 2.2 by W3C>[§§9.2.2 and 9.4.2, inline-level content and line boxes]{ref}
For ordinary baseline-aligned text, the <CSS leading> calculation supplies each contribution's height $a_i$ above and depth $d_i$ below the <text baseline>. Include the <CSS strut> among those contributions. Enclosing them requires
$$
\boxed{H_{\rm line}=\max_i a_i+\max_i d_i.}
$$
For example, extents $(a_1,d_1)=(10,4)$ and $(a_2,d_2)=(17,3)$ <CSS pixels> produce a line of $17+4=21$ <CSS pixels>, although the individual extents sum to 14 and 20. The largest upper extent and largest lower extent can come from different contributions. The <CSS leading> diagram illustrates the same geometry with another pair of hypothetical metrics.
A <CSS replaced element>, such as an inline image, contributes according to its <CSS margin box>; it need not follow the text's <line height>. Other settings of <CSS vertical alignment> require additional positioning rules. These effects explain why a line's final height can exceed the `line-height` declared on its surrounding <CSS block container>.<Visual formatting model details in CSS 2.2 by W3C>[§10.8, sizing and vertical alignment of inline-level boxes]{ref}
Back to article page
