The line height governs the vertical spacing allocated to a line of text. For a simple repeated run with fixed metrics, it sets the distance from one text baseline to the next. The gap between visible ink is a separate quantity, because different glyphs need not fill their allocated vertical region.
In an elementary single-font model, let be the positive font ascent, the positive magnitude of the font descent, and an added font line gap. ThenFor hypothetical metrics , and font units, font units. With 1000 font units per em and 20 pixels per em, the text baselines are 24 pixels apart. The line height can thus exceed the nominal font size.
CSS lays out inline content through line boxes. Its
line-height participates in that calculation, and a block's declared value sets a minimum rather than guaranteeing that every mixed-content line has exactly that height. A taller inline object or a different alignment can enlarge a line box. The specification also describes how extra typographic leading is split above and below the chosen font metrics.[ref]Visual formatting model details in CSS 2.2 by W3C. Sections10.8–10.8.1: line-box construction, leading and the block-container minimum
The useful distinction is between the nominal font size, the font ascent and font descent used for layout, and the actual ink bounding boxes. They answer different geometric questions even when they are expressed in the same units.
New to topics? Read the docs here!
