1

W3C source for the quotes below.

The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'

Thus, an element with display: inline-block is an inline-level element.

Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

Thus, all inline-level boxes participate in an inline formatting context.

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

If all inline-level boxes participate in an inline formatting context, and an inline box is one that is both an inline-level box and participates in an inline formatting context, it must be true that all inline-level boxes are inline boxes, and vice versa.

And finally, here comes the statement that then breaks the logic:

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

In other words:

First we are told, via logical implication, that all inline-level boxes are inline boxes. Then, we are told the opposite: That several inline-level boxes (like those generated by elements with display: inline-block), are in fact not inline boxes.

Am I missing something or are the quotes contradicting each other?

EDIT

Magnus
  • 6,791
  • 8
  • 53
  • 84

1 Answers1

5

There is not a contradiction in the standard, but we have to read carefully to spot the differences.

  1. Inline-level boxes are boxes that participate in an inline formatting context.
  2. An inline box is a inline-level box whose contents participate in its containing inline formatting context

A span-element inside a paragraph is an inline box, because the text inside the span-element participate in the paragraphs' surround content.

An element with display: inline-block; will flow with surrounding content as if it were a single inline box, but since this element actually will generate a block element box, the elements contents do not participate in its containing inline formatting context.

haugsand
  • 400
  • 1
  • 5
  • Thanks, that's right. I added two links to the bottom of my OP, that will hopefully help others in the future. The second link is an answer I just posted myself, to another similar question (after understanding the concept a bit better). It covers some of the points you raise in this answer. – Magnus May 10 '18 at 17:53