Are Block-Level Boxes Enclosed in Line Boxes?

Question

Is there somewhere in the W3C spec, that specifies that block-level boxes get surrounded in line boxes automatically?

Background

As we know, vertical padding and border of inline boxes do not affect line box height. Line box height, in turn, is the only feature of inline boxes that affects position of subsequent content. This, in turn, implies that padding / border on inline boxes will bleed onto surrounding content.

Quote from W3C CSS 2.1, Chapter 10:

Although margins, borders, and padding of non-replaced elements do not enter into the line box calculation, they are still rendered around inline boxes. This means that if the height specified by line-height is less than the content height of contained boxes, backgrounds and colors of padding and borders may "bleed" into adjoining line boxes.

Note how it says: "bleed into adjoining line boxes".

I did a test and noticed that it does in fact also bleed into adjoining block-level boxes.

.one {
  border: 1px solid green;
}
.two {
  border: 1px solid red;
}
.three {
  line-height: normal;
  border: 1px solid blue;
  padding: 10px 0;
}

  <div class="one">test</div>
  
  <span class="two">
    <span class="three">test two</span>
    x
  </span>

Therefore, I was wondering, does it say anywhere in the spec that block-level boxes are also surrounded by line boxes? I could only find relevant line box details under inline formatting context, within which only inline-level boxes participate.

Thank you.

Answer 1

I'm not actually sure if a block-level box can be said to be adjoining to a line box (or vice versa). However, in your example, there are in fact two line boxes — one that is generated by div.one when formatting its inline contents by establishing an inline formatting context, and another that is generated by the body element when formatting span.two (and its span.three child) — and the line box inside div.one can be said to be adjoining to the one containing span.two and span.three.

For the purposes of drawing inline boxes, it doesn't matter which block container is generating each line box that's adjoining to those containing those inline boxes. It doesn't even matter whether any of the block containers also establishes a block formatting context. That is why you see the inline box of span.three bleed into the line box inside div.one.

A block-level box cannot directly coexist with a line box, and by definition of "block-level" it cannot be enclosed in a line box either (to answer your title). In your example, the line box on which the spans are rendered resides in an anonymous block box that is then laid out as a sibling of the div. That anonymous block box establishes its own inline formatting context for the spans, just like the div does for its text.