CODEWITHSUNDEEP
htmlcss
tonitone120
tonitone120

Reputation: 2310

Clarifying definition of block container and block box

I'm reading these MDN CSS Reference Concept articles and I find the terminology confusing or imprecise.

In the last article it says:

  1. A block container contains elements with display: inline participating in an inline formatting context (inline-level boxes), or only elements with display: block participating in a block formatting context (block-level boxes). This seems an impractical definition, especially when we've just learnt that an element that has normal flow has children with both display: block & display: inline. Are there two separate concepts here or have I just misunderstood?
  1. If they are two separate concepts, this makes me question the definition of block box/block which, at first, is described as:

a box generated by an element with display: block is called a "block box" or just a "block".

Then, at the end of the article it says:

A block box is a block-level box that is also a block container.

In the first definition, technically, the element with display: block could appear anywhere. The second says it has to appear as a child to a parent that contains only blocks or inlines.

Upvotes: 3

Views: 559

Answers (1)

Alohci
Alohci

Reputation: 83006

HTML elements are not CSS boxes. Zero, one, or multiple boxes are generated for a single HTML element.

The primary concept you're missing is that of an anonymous box.

Suppose you have

<section>
  <span>Foo</span>
  <div>Bar</div>
  Baz
</section>

where section and div are display:block and span is display:inline, just as they are by default.

Now "Bar" and "Baz" get wrapped in anonymous inline boxes, and the span generates an inline box.

Further, because the block box generated by the section element would contain both inline boxes and block boxes, the span and "Baz" inline boxes are wrapped in anonymous block boxes. So the final box tree looks like this.

Block Box             <= from `section` element
  +--- Block Box      <= anonymous block box
  | +--- Inline Box   <= from `span` element
  +--- Block Box      <= from `div` element
  | +--- Inline Box   <= anonymous inline box from "Bar"
  +--- Block Box      <= anonymous block box
    +--- Inline Box   <= anonymous inline box from "Baz"

As you can see from this, no block box contains both a block box and an inline box as direct children, which is what your quoted paragraph is saying.

Upvotes: 5

Related Questions