Difference between inline box and atomic inline box

Question

Consider the following code:

div{
    display: inline-block;
}

div block is generated atomic inline-level box now. As

Answer 1

From the WC3 CSS2.1 Specification, Chapter 9 Visual formatting model:

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box.

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.

Therefore

• Elements with display: inline generates inline boxes.
• Elements with display: inline-table | inline-block and replaced inline-level elements (like <img>) generates inline-level atomic boxes.

With regards to your question on what opaque means, @BoltClock explains it in a great way here:

CSS Spec - Atomic Inline Level Boxes

Opaque 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.

---

And here is some additional detail from me, that might help

Inline-level boxes includes boxes...

• ...whose content participate in its containing inline formatting context
  • These are called inline boxes
  • They are generated by elements with display: inline
  • Note the words "...whose content participate in its containing...". This means that inline-level child elements inside this inline-level box, are in the same inline formatting context as the parent. This, in turn, means that the individual child inline-level elements will separate and fall to a new line if there is white space (and the white-space property is not changed). In effect, the parent inline box will split into several boxes. Here, all the inline-level elements inside the parent inline box, live in one big happy inline formatting context.
• ...that participate in their inline formatting context as a single opaque box
  • These are called atomic inline-level boxes
  • They are generated by elements with display: inline-table | inline-block | inline-flex | inline-grid
  • Opaque means that the box is one single solid box
  • A consequence of that is that the box cannot be split, even if inline-level boxes inside it normally should fall to the next line
  • Instead, scrollbars would appear
  • Contents inside this atomic inline-level box does not participate in the same inline formatting context as its parent

And finally, as seen, inline-level boxes is a super-set of inline boxes.

Hope that helps someone in the future.

Answer 2

Indeed. Referring to Visual Formatting Model

<p>Some <em>emphasized</em> text</p>

anonymous inline boxes inherit inheritable properties from their block parent box. Non-inherited properties have their initial value. In the example, the color of the anonymous inline boxes is inherited from the P, but the background is transparent