块级盒子是否封装在线路盒子中？

Question

W3C 规范中是否有某处指定 块级框 自动包围在行框中？

背景

众所周知，vertical padding and border of inline boxes do not affect line box height。行框高度反过来是行内框影响后续内容位置的唯一特征。反过来，这意味着 内联框 上的填充/边框会渗入周围的内容。

引自 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.

注意它是怎么说的："bleed into adjoining line 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>

因此，我想知道，规范中有没有说 块级框 也被行框包围？我只能在 inline formatting context 下找到相关的 line box 详细信息，其中只有 inline-level box 参与。

谢谢。

Answer 1

我不确定 block-level 框是否可以说是与线框相邻（反之亦然）。但是，在您的示例中，实际上有两个行框 - 一个由 div.one 在通过建立内联格式化上下文格式化其内联内容时生成，另一个由 body 元素在格式化 span.two（及其 span.three child）——并且 div.one 内的行框可以说是与 相邻的包含 span.two 和 span.three.

出于绘制行内框的目的，哪个块容器生成与包含这些行内框的行框相邻的每个行框并不重要。任何块容器是否也建立了块格式化上下文甚至都没有关系。这就是为什么您会看到 span.three 的行内框渗入 div.one.

内的行框

A block-level 框不能直接与行框共存，并且根据 "block-level" 的定义，它也不能包含在行框中（回答你的标题）。在您的示例中，呈现 span 的行框位于 anonymous block box 中，然后将其布置为 div 的同级。该匿名块框为 span 建立了自己的内联格式化上下文，就像 div 为其文本所做的那样。

块级盒子是否封装在线路盒子中？

Are Block-Level Boxes Enclosed in Line Boxes?

html

css

w3c