3

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.
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Magnus
  • 6,791
  • 8
  • 53
  • 84
  • here is another one : https://stackoverflow.com/questions/8012297/html5-non-replaced-vs-replaced-element?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa – Temani Afif May 09 '18 at 11:26
  • 1
    The meaning of "non-replaced" is the same regardless of whether a box is block-level, inline-level, flex-level or grid-level, and regardless of whether said box is a block container, flex container, or grid container. An inline-block just happens to be an inline-level block container box. – BoltClock May 09 '18 at 11:30
  • 1
    Hehe, thanks, but my issue is not around the concept of replaced / non-replaced. Ok, so `non-replaced inline blocks` are inline blocks that are non-replaced (i.e. not embedded). That still leaves you with the question of what an inline block is (which is not defined, and is not from elements with `display:inline-block`). – Magnus May 09 '18 at 11:30
  • 1
    @Magnus: An element with `display: inline-block`... is an inline-block (unless its container forces it to be something other than inline-level). CSS doesn't do that thing some languages do where something isn't what it says (or you say) it is. – BoltClock May 09 '18 at 11:33
  • 1
    @BoltClock Thanks for your comment. I get the concept of replaced / non-replaced, so this is more around what an `inline block` is. I do not think it is a box resulting from an element with `display:inline-block`, because those are `Inline-level boxes`. The quote I have above from W3C is in the `block-level` section. – Magnus May 09 '18 at 11:33
  • textarea, select are inline-block element – Temani Afif May 09 '18 at 11:33
  • check this : https://www.w3.org/TR/css-display-3/#valdef-display-inline-block – Temani Afif May 09 '18 at 11:35
  • @Magnus: The sentence from the block formatting section that you quote is listing examples of block containers that are not block-level boxes (inline-blocks being one such example). The purpose of that sentence is to convey to the reader that not all block containers are block-level boxes - indeed, that the two concepts are distinct and should not be conflated. See [this question](https://stackoverflow.com/questions/30883857/css-spec-block-level-box-block-container-box-and-block-box) instead. – BoltClock May 09 '18 at 11:38
  • Gents, I appreciate your input. I have edited the question with a clarification on what I am actually asking. @TemaniAfif I still don't think it is a duplicate of the linked question :) – Magnus May 09 '18 at 11:48
  • I reopened your question. I think you might be mixing up "block container" and "block-level", and I think the "non-replaced" part of "non-replaced inline block" might be throwing us all off. Let me see if I can clear things up with an answer. – BoltClock May 09 '18 at 11:50
  • @BoltClock Thanks, just as a side-note: I know that `block-level boxes` are `block container boxes`, with the exception of `table boxes` and `replaced elements`. What is throwing me off is that there seems to be a logical flaw in their term `inline block`. This (non-hyphened) term is not brought up anywhere else in the spec. – Magnus May 09 '18 at 11:53

1 Answers1

5

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356