One line, one baseline

Every inline box on a line hangs its own glyphs from a single shared baseline, and the leading - a box's line-height less its font's own height - is split in half above and below that content area (CSS 2.1 §10.8.1). The shaded band behind each sample is exactly one line box tall, so it shows where the line box itself begins and ends.

1 — Mixed font sizes share a baseline, not a top edge

2 — A tall line-height centres the text, it does not hang it from the top

Half of the leading goes above the glyphs and half below, so the text sits in the middle of its band. The band itself is the declared line-height either way.

3 — A line can be taller than every line-height on it

The two sides of a line box are maximised independently: the box reaching highest above the baseline need not be the one reaching lowest below it. Here the 26pt text sets the ascent side and the small span's tall line-height sets the descent side, so the band is taller than either box's own line-height.

4 — An outside ::marker sits on its item's first baseline

A ::marker in a larger font than its item keeps its own baseline on the item's, rather than hanging its digits below the text they number - and the item's first line grows to hold it. css-lists-3 §3.5 leaves both expressly undefined; this follows what browsers do.

5 — An atomic inline sits on the baseline too

An image, an inline <svg>, MathML, a form control or an inline-block is aligned by its own box rather than by font metrics: its bottom margin edge rests on the line's baseline, and the line grows above the baseline to hold it. An inline-block with visible overflow uses its own last line's baseline instead, so its text lines up with the text beside it.

10pt text around a 24pt image - the image's bottom is on the text baseline

before after Agy

the same image with margin-bottom: 6pt - the margin edge, not the image, meets the baseline

before after Agy