13

I am reading CSS Spec 2.1 and find the concepts hard to distinguish:

Except for table boxes, which are described in a later chapter, and replaced elements, a block-level box is also a block container box. A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes. 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. Block-level boxes that are also block containers are called block boxes.

May I interpret the description above as follow?:

enter image description here

Joy
  • 9,430
  • 11
  • 44
  • 95

2 Answers2

12

Your interpretation is correct.

Here are some additional details:

  • The reason a table box is not a block container is because it establishes a table layout, not a block layout. Content goes into the cell elements rather than the table element, which is why it is the cell boxes that are block containers rather than the table box itself.

  • A replaced element doesn't contain any other content and therefore cannot be a block container.

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

Note that replaced elements and table boxes can be either inline-level or block-level. Inline tables and inline replaced elements are simply excluded from the section you quote because that section only pertains to block-level boxes; you'll find references to them elsewhere in section 9, or in sections 10 and 17 respectively.

Also, even though a block container box can only either contain block-level boxes or inline-level boxes, you can still mix both in the same block container box; internally it simply segregates the block-level and inline-level boxes via anonymous block boxes.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • 2
    It feels very complicated to comprehend the visual formatting modal. Especially sub topics 9.2 and 9.4. I wish the standard could have done a better job explaining these topics, just like it did for rest of the topics. –  Oct 11 '19 at 13:37
  • 2
    @Binary_10: The standard wasn't (always) intended to be a resource for web developers. It was written the way it was so everything was spelled out as clearly as possible for browser developers. That said, I think the CSSWG is working to make modern specs easier to understand. – BoltClock Oct 19 '19 at 12:02
  • 2
    Then what is the best resource for developers to gain deeper knowledge and to lay a solid foundation (CSS) ? –  Oct 21 '19 at 07:34
2

Remember that HTML is a tree so each node can act as both a parent (of children) and child (of a parent)

Bearing this in mind, things start to make sense, Block-level box refers to box act as chlid

Block-level boxes are boxes that participate in a block formatting context.

On the other hand, block container box refer to a parent who can contain others

A block container box either contains only block-level boxes or establishes an inline formatting context and thus contains only inline-level boxes

Just like a node can either be a child and a parent, an HTML node can either act as a parent(block container box) or child (block-level box) or BOTH

For example, if children in a node are not allowed (replaced element), it can never be a parent, it can only be a child (Block-level boxes) at most, not a parent (block container box)

And there is no reason to prevent a non-block parent contain a block parent. An inline-block itself is not a block, but it can contain block-level box

The point is a spec is easier to understand from a parent-child view

Guichi
  • 2,150
  • 1
  • 19
  • 27