Search code examples
htmlcssw3c

What Are "Non-Replaced Inline Blocks"?

Background

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, chapter 9 Visual formatting model, specifies that:

Not all block container boxes are block-level boxes: non-replaced inline blocks and non-replaced table cells are block containers but not block-level boxes.

Question

Non-replaced inline blocks are not mentioned anywhere else in chapter 9/10. Could someone please help me understand what elements those block boxes represent?

Side Notes

  • They are not referring to non-replaced inline elements, which are the most common kind of inline elements
  • Neither are they referring to elements with display:inline-block, because they are inline-level boxes

EDIT

  • From the quote above it can be inferred that non-replaced inline blocks are block container boxes.

  • We also know that:

    Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

  • If non-replaced inline blocks are block container boxes, and elements with display:inline-block are inline-level boxes (i.e. not block-level boxes and thus not block container boxes) then it logically falls out that non-replaced inline blocks cannot be the result of elements with display:inline-block.

  • In other words, inline blocks do not come from elements with display:inline-block.

Other Note(s)

  • I am comfortable with the concept of replaced vs non-replaced, just trying to get what the spec means by inline block in the first quote above, when the only definitions are for inline-block <-- Note the hyphen.
Solution

  • The terms inline block and inline-block refer to the same thing (an inline-level, block container box) and are completely interchangeable. An element with display: inline-block does, indeed, generate an inline-block box, or an inline block box (with or without the hyphen). The hyphen is only there so CSS is able to define inline-block as a single keyword value.

    The non-hyphenated form appears several times throughout section 9 of CSS2, but doesn't appear anywhere else in that spec (it appears once in css-display-3, in a sentence lifted almost verbatim from CSS2, so it doesn't count). I don't know why this is the case, but it is not the intention that the non-hyphenated form refers to something different from the hyphenated form. In fact, section 9 itself uses both forms interchangeably — see section 9.2.4 for an example of the hyphenated form being used:

    inline-block
    This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

    I can see why readers would get confused, though. Fortunately, the rest of the CSS2 spec, and most CSS3 specs (that I've examined anyway) are all consistent in the use of the hyphenated form.

    Also, the presence or absence of the word "box" doesn't change the meaning of "inline-block". Generally, the spec leaves it out because it's needlessly verbose; everything in the formatting structure that's not a text run is a box anyway, and "inline-block" as a noun rolls off the tongue rather nicely.

    If non-replaced inline blocks are block container boxes, and elements with display:inline-block are inline-level boxes (i.e. not block-level boxes and thus not block container boxes) then it logically falls out that non-replaced inline blocks cannot be the result of elements with display:inline-block.

    I think there is some misunderstanding here. The quote above lists inline-blocks as an example of a block container box that is not block-level; the purpose of that quote is to convey to the reader that not all block containers are block-level boxes, and not all block-level boxes are block containers — indeed, that the two concepts are distinct and should not be conflated. From my answer to this related question:

    The only difference between a block box and an inline-block is that the former is block-level while the latter is inline-level. Hence the display values display: block and display: inline-block respectively. As both are block containers, there is no difference in how their contents are formatted.

    Therefore, again, display: inline-block does cause an element to generate an inline-block (except when other parts of the layout force it to be formatted as block-level, or blockified, which is a separate topic altogether). Whether this inline-block is replaced or non-replaced depends on the element; for example, an <img> element with display: inline-block generates a replaced inline-block, whereas a <div> element with display: inline-block generates a non-replaced inline-block.

    A replaced inline-block cannot actually form a block container, because its contents are rendered outside of the rules of CSS formatting. This is why the spec distinguishes non-replaced inline-blocks as block containers. There really isn't more to it than that.