6

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!

Justin Foss
  • 85
  • 4

2 Answers2

13

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
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    THANK YOU!! I have spent almost 3 days trying to wrap my head around this and you made it completely clear in a couple of paragraphs. I'm surprised there is not more on this out there. Aside from the spec, I have only found a few blog posts that don't really do a very good job explaining it and now that I understand it, I am surprised by how simple it really is. – Justin Foss Feb 16 '15 at 10:37
  • 3
    @Justin Foss: Yeah, unfortunately there aren't very many resources out there on understanding the more intricate aspects of CSS. But that's where I come in :) – BoltClock Feb 16 '15 at 11:00
4

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.

Etheryte
  • 24,589
  • 11
  • 71
  • 116
  • Thank you! I've been hung up on that portion of the spec for a while now. So are they using the terms opaque and atomic to essentially describe the same thing? I get why the term 'atomic' would apply because in an inline formatting context, an atomic inline-level box can be thought of as indivisible, but I'm not fully clear on the term 'opaque' used in this context. Is it because, in an inline formatting context, an atomic inline-level element can't be looked any deeper into(which would essentially be another way of saying it can't be broken down into constituent parts)? – Justin Foss Feb 16 '15 at 10:49
  • 3
    @Justin Foss: I think this answer does a better job of explaining the term "opaque" specifically. The contents of an atomic inline participate in a formatting context that is established *by* the atomic inline - they can never affect the layout of elements outside and around the atomic inline. – BoltClock Feb 16 '15 at 11:12