= CSS strut
{c}
A \b[CSS strut] is the imaginary zero-width <CSS inline box> used to represent a <CSS block container>'s own <font> and <line height> when a <CSS line box> is constructed. It supplies minimum extents on both sides of the <text baseline>, even when the actual text uses smaller metrics.<Visual formatting model details in CSS 2.2 by W3C>[§10.8.1, imaginary strut and block-container line-height]{ref}
Suppose the container has <font ascent> $A=12$, <font descent> magnitude $D=4$ and <line height> $H=20$ <CSS pixels>. Its <CSS leading> is $20-12-4=4$, so the strut contributes 14 above and 6 below the <text baseline>. A small text contribution with extents 7.5 above and 2.5 below still produces a line 20 <CSS pixels> high because the strut dominates both directions.
The minimum is geometric rather than merely a comparison of total heights. If another contribution extends 18 above and 2 below the same <text baseline>, the enclosing <CSS line box> becomes $18+6=24$ <CSS pixels>. Both the strut and the other contribution individually total 20. Keeping the separate upper and lower extents explains the extra height.
This construction concerns a <CSS line box> that participates in layout. <CSS> also specifies conditions under which empty line boxes are treated as nonexistent, so `line-height:20px` alone does not make every otherwise empty block 20 <CSS pixels> high.<Visual formatting model in CSS 2.2 by W3C>[§9.4.2, treatment of empty line boxes]{ref}
Back to article page
