3

在“CSS The Definitive Guide 3rd edition”，第 166 页，有一段描述了关于水平边距的行为：

请注意，由于水平边距不会折叠，父元素的内边距、边框和边距会影响其子元素。这种影响是间接的，因为元素的边距（等等）可以引起子元素的偏移。

我也无法理解本书为此行为提供的示例：

http://jsfiddle.net/PjTA3/

HTML：

<div>
    <p>A paragraph</p>
    <p>Another paragraph</p>
</div>

CSS：

div {padding: 30px; background: silver;}
p {margin: 20px; padding: 20px; background: white;}

谁能给我解释一下？非常感谢。

4

1 回答 1

6

我创建了一个小提琴来提供正在讨论的代码的实时示例。如果您使用的是 Chrome 或类似的现代浏览器，您可以右键单击示例中的段落并选择“检查元素”以查看填充和边距如何交互。

有问题的段落写得很糟糕，我同意。它开始说“水平边距不会塌陷”，然后给出一个没有相邻水平边距的例子来证明这个断言。该示例确实具有相邻的垂直边距（第一段的下边距，第二段的上边距），我们可以看到它们确实折叠（它们占据相同的空间：检查一个元素，然后检查另一个元素）。

但是，这与示例中演示的非堆叠偏移无关，即段落的非相邻边距从包含 div 的填充边缘偏移它们- 因此为什么第一段的顶部，左侧，和右边缘50px来自 div 的外边缘（20px边缘来自<p>+30px填充<div>）。

我认为该示例的准确标题最好写为

通常，边距、填充和边框不会折叠——除了块级元素的垂直边距（规范中定义的例外情况）。内联元素的定位不受垂直尺寸的影响。

编辑：

更正了替代标题中的轻微不准确之处：例外情况，以及原始段落的“水平边距不会折叠”的断言仍未得到证实：我在这里创建了一个类似的小提琴来证明这一点。

在第二个示例中，我们将 s 替换<span>为内联元素<p>，这使我们可以看到元素自然地水平排列：与第一个示例不同——第二个段落的上边距折叠到第一段的下边距——第二个段落的左边距不会折叠到第一个右边距，而是紧随其后——将它们40px分开。

顺便说一句，这也表明内联元素的垂直填充、边框和边距确实会折叠：这些跨度的顶部和底部填充和边距不会影响它们与容器的偏移量。

于 2013-03-06T12:27:56.617 回答