Question

W3C的CSS2.1规范，第8.6 The box model for inline elements in bidirectional context章，声明：

对于每个线框，UA必须为每个线框生成内联框   元素并以视觉顺序渲染边距，边框和填充   （不是逻辑顺序）。

当元素的'direction'属性为'ltr'时，最左边   生成元素的第一个行框的生成框   左边距，左边框和左边距，最右边   生成元素的最后一个行框的生成框   正确的填充，右边界和右边距。

问题

它表示“最左边生成的框”，表示内联级元素创建了多个内联级别框。这是因为在每个换行符时它会创建一个新的匿名内联级别框吗？
为什么内嵌框的填充/边框表现如下？在CSS规范的基础上深入了解为什么它以它的方式显示它将非常感激。

.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}

<span class="test">test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2</span>

Answer 1

关于第二个问题，您可以参考this part of the specification：

'height'属性不适用。内容区域的高度   应基于字体，但此规范未指定   怎么样。 UA可以例如使用em-box或最大上升器和   字体的下降。（后者将确保带有部分的字形   在em-box之上或之下仍然属于内容区域，但是   导致不同字体的不同大小的盒子;前者会   确保作者可以控制相对于的背景样式   'line-height'，但导致字形在其内容之外绘画   面积。）

内联未更换框的垂直填充，边框和边距   从内容区域的顶部和底部开始，无关   与'线高'。但时只使用'line-height'   计算行框的高度。

.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}

div {
 border:1px solid red;
 margin:50px 0;
}

<div>
<span class="test">test2test2test2test2test2test2test2 test</span>
</div>

<div>
<span class="test">test2test2test2test2test2test2test2 test st2test2test2test2 test st2test2test2test2 test st2test2test2test2 test</span>
</div>



<div>
<span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2</span>
</div>

<div>
<span class="test" style="line-height:50px;">test2test2test2test2test2test2test2 test2test2 test2test2test2test2test2test2test2 test2test2</span>
</div>

Answer 2

回答第一个问题：

它表示“最左边生成的框”，表示内联级元素创建了多个内联级别框。这是因为在每个换行符时它会创建一个新的匿名内联级别框吗？

是的，但这只是一个原因。内联级元素可以创建零个，一个或多个内联级别框。因此，没有内容或水平填充，边框或边距的内联元素将创建零内联级别框。元素可以创建多个内联级框的另一种方式是元素是否包含子元素。

因此，如果我们有<span>foo <b>bar</b> baz</span>，那么即使全部位于一行，跨度也会为foo创建一个内联级别框，这将获得左边距，左边框和左边框填充，以及baz的单独的内联级别框，它将获得正确的边距，右边框和右边距。

b元素为bar创建内联级别框，可能有自己的边距，边框和填充。

请参阅Temani对第二个问题的回答。

内联元素的框模型

2 个答案: