1

Consider the following code:

<div></div>

div{
    display: inline-block;
}

div block is generated atomic inline-level box now. As said in spec. 9.2.2

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 does 'opaque' mean in this case? Is inline boxes participated in the inline formatting context as a transparent box?

So I'm interested in what difference between atomic inline-level box and inline box?

2 Answers2

2

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.

Magnus
  • 6,791
  • 8
  • 53
  • 84
0

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

Kuzgun
  • 4,649
  • 4
  • 34
  • 48
  • How does anonymous blocks relation to my question? I'm interested in difference between atomic inline-level box and inline box. –  Feb 04 '14 at 16:38
  • The normal inline boxes are mentioned as anonymous inline boxes. – Kuzgun Feb 05 '14 at 06:58