时间戳

首页 > 解决方案 > 内联元素的盒子模型

html - 内联元素的盒子模型

问题描述

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

对于每个 line box，UA 必须采用为每个元素生成的内联框，并按视觉顺序（不是逻辑顺序）呈现边距、边框和填充。

当元素的'direction'属性为'ltr'时，元素出现的第一行box的最左边生成的box有左边距、左边框和左边padding，最后一行的最右边生成的box元素出现的框有右内边距、右边框和右外边距。

问题

.test {
  margin: 0 10px;
  padding: 20px;
  border: 5px solid blue;
}
<span class="test">test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2 test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2test2</span>

标签： htmlcss

解决方案

回答第一个问题：

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

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

因此，如果我们有<span>foo <b>bar</b> baz</span>，那么即使所有内容都在一行上，span 也会为 创建一个内联级框foo，它将获得左边距、左边框和左填充，以及一个单独的内联级框baz，这将获得右边距，右边框和右填充。

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

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

推荐阅读