CSS inline formatting context

A CSS inline formatting context lays out inline-level content along lines. The generated CSS inline boxes and other inline-level items are arranged into CSS line boxes, whose widths depend on the available space and whose heights account for text metrics and vertical alignment.^[ref]

For a synthetic wrapping example, suppose three words each occupy 60 pixels and the spaces between them occupy ten. Two words need 130 pixels; all three need 200. With 140 pixels available and ordinary breaking opportunities at the spaces, two fit on the first line and the third moves to another. With 220 pixels available, all three can fit together.

One HTML element can then generate fragments on several lines. A styled span containing a long phrase need not correspond to one unbroken rectangular painted box. Conversely, an inline replaced image or a CSS inline-block box can participate as a single inline-level item whose own dimensions affect the line.

Vertical placement is handled within that context. CSS vertical alignment and text metrics can change a line's required extent even when its words and available horizontal width remain unchanged. The inline formatting context therefore combines line breaking with placement; knowing only the element tree or only the font size does not fully specify the result.