display:block inside display:inline

Question

I want to understand what happens when an element whose CSS is display:block is a DOM child of an element whose CSS is display:inline (so that the

Answer 1

I think I've understood the difference, finally, and there is a fundamental difference.

When the top-level element (e.g. ) is defined with display:block, then:

• There's a block associated with the element

• This block contains (i.e. it acts as the containing block for) anonymous blocks (e.g. text nodes) and for non-anonymous child element (e.g.

  blocks)

• The top-level element's style attributes, e.g. padding, are associated with this containing block

When the top-level element (e.g. ) is defined with display:inline, then:

• There's no single block associated with the element

• The element's contents (text nodes in an anonymous block, and child elements in a non-anonymous block) do not have a containing block which is associated with the top-level element

• The top-level element's style attributes, e.g. padding, are associated with its inline content