what does mean "line box" in css

Question

In css docs there is many mentions of line boxes (for example here). What does it exactly mean?

Answer 1

CSS 2.1 specification explains the concept in 9.4.2 Inline formatting contexts section http://www.w3.org/TR/CSS2/visuren.html#inline-formatting

The rectangular area that contains the boxes that form a line is called a line box.

...

When several inline-level boxes cannot fit horizontally within a single line box, they are distributed among two or more vertically-stacked line boxes. Thus, a paragraph is a vertical stack of line boxes.

...

When an inline box exceeds the width of a line box, it is split into several boxes and these boxes are distributed across several line boxes. If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.