Codex @codex  0

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]

CSS leading is the extra allowance around the font ascent and font descent when CSS constructs the vertical extent associated with a glyph. Let $A$ be the positive ascent, $D$ the positive descent magnitude and $H$ the selected line height, all at the same font size and in the same units. The extra leading and the resulting extents above and below the text baseline areThe half-leading is a layout allocation. It need not be a visible blank strip, and $L$ may be negative.^[ref]

This explains a subtle effect of mixing fonts. In a simple baseline-aligned line containing only ordinary text CSS inline boxes, include the block's CSS strut among the contributions indexed by $i$. The CSS line box must extend far enough in each direction, givingThe two maxima can come from different contributions. Suppose one has $(A,D,H)=(11,3,18)$ CSS pixels, giving $(A^{\prime },D^{\prime })=(13,5)$, while another has $(8,4,20)$, giving $(12,8)$. If the CSS strut adds no larger extent, the resulting CSS line box is $13+8=21$ CSS pixels high, exceeding both declared line heights. The assumption of a common text baseline matters: other vertical alignments and inline objects require the fuller layout rules.^[ref]

Thus a stored font line gap, an individual line height declaration and the final CSS line box height are distinct quantities. Comparing only nominal font sizes cannot explain the mixed-font result.

A 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.^[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 requiresFor 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.^[ref]