CODEWITHSUNDEEP
htmlcssw3c
Magnus
Magnus

Reputation: 7821

Contradiction in Definition of Inline-Level Boxes and Inline Boxes (W3C)

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

Upvotes: 1

Views: 156

Answers (1)

haugsand
haugsand

Reputation: 420

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.

Upvotes: 5

Related Questions