Box Model for Inline Elements

Question

W3C\'s CSS2.1 specification, chapter 8.6 The box model for inline elements in bidirectional context, states:

For each line box, UAs must take the inline b

Answer 1

To answer the first question:

It says "left-most generated box", which indicates that the inline-level element creates more than one inline-level box. Is that because at each line break it creates a new anonymous inline-level box?

Yes, but that's only one reason. An inline-level element can create zero, one or many inline-level boxes. So an inline element with no content or horizontal padding, border, or margin will create zero inline-level boxes. A different way in which an element can create multiple inline-level boxes is if the element contains child elements.

So if we have foo bar baz, then even if that all sits on one line, the span will create one inline-level box for foo, which will get the left margin, left border and left padding, and a separate inline-level box for baz, which will get the right margin, right border and right padding.

The b element creates the inline-level box for bar, which may have its own margins, borders, and paddings.

See Temani's answer for your second question.