specifications - CSS Spec - Atomic Inline Level Boxes

Question

I'm trying to wrap my brain around some of the finer points of CSS and I found this portion of this excerpt from the W3 CSS Visual Formatting Spec 9.2.2 particularly obtuse:

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.

What exactly do they mean by single opaque box?

Any clarification is much appreciated. Thanks!

Answer 1

It means that the box is a singular, solid unit, and that it cannot be split across lines like an inline box can when its text cannot all fit on a single line. See section 9.4.2 which describes this splitting behavior and the terms "inline formatting context" and "line box".

If there is no longer any space on a line to fit an atomic inline box, the entire box wraps to the next line if there is a line break opportunity (otherwise it overflows the line box), even if the atomic inline box contains inline content that would partially fit the remaining space on the current line. This is because the inline content of an atomic inline doesn't participate in the same inline formatting context as the atomic inline itself — it participates in a separate inline formatting context within the atomic inline box, and therefore must remain within the boundaries of the atomic inline box.

Compare:

p {
    width: 5em;
    background-color: #f0f0f0;
}

span {
    background-color: #d0d0d0;
}

.inline-block {
    display: inline-block;
    width: 4.5em;
}

<p>text <span class=inline>inline text</span> more text
<p>text <span class=inline-block>inline block</span> more text