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

Answer 2

To understand this concept you need some additional context from the same spec point you linked to, namely:

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context.

After which your quote follows.

What this means is that an inline box will render its contents as inline as well, for example, see the following:

sample <span>placeholder text</span> here

As you can see, all the elements are rendered inline, simplified that means on the same line when possible.
Now what are atomic inline boxes and what does your quote mean?
First, let's look at the following example:

.at {
  display: inline-block;
}

sample <div class="at"><div>placeholder</div><div>text</div></div>here

The atomic box in this case is the divider with class at. It participates in rendering as an inline element, but its children can be positioned in any manner separate from inline positioning. It's a single opaque box regarding inline rendering.