Question

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

请注意，由于水平边距不会折叠，因此父元素的填充，边框和边距会影响其子元素。效果是间接的，因为元素的边距（等等）可以导致子元素的偏移。

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

HTML：

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

CSS：

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

任何人都可以向我解释一下吗？非常感谢。

Answer 1

I created a fiddle to provide a live example of the code under discussion。如果您使用的是Chrome或类似的现代浏览器，则可以右键单击示例中的段落，然后选择“检查元素”以查看填充和边距的交互方式。

有问题的段落是可怕的，我同意。它开始说明“水平边距不会崩溃”，然后提供一个示例，其中没有相邻的水平边距来演示断言。该示例确实具有相邻的垂直边距（第一段的下边距和第二段的上边距），我们可以看到这些做崩溃（它们占据相同） space：检查一个元素，然后检查另一个元素。）

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

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

通常，边距，填充和边框不会崩溃 - 除了块级元素的垂直边距（specification中定义的例外）。内联元素的定位不受垂直尺寸的影响。

编辑：

更正了替代字幕中的轻微不准确性：原因并且原始段落声明“水平边距不会崩溃”仍然未经证实：I created a similar fiddle here to demonstrate this。

在第二个示例中，我们为<div> s替换了内联<span>元素，这样我们就可以看到水平地相互自然流动的元素：与第一个示例不同 - 第二个示例段落的上边距折叠成第一段的下边距 - 第二段的左边距不会折叠到第一个右边距，而是立即开始 - 将它们<p>分开。

顺便提一下，这也表明内嵌元素的垂直填充，边框和边距做崩溃：这些跨度的顶部和底部填充和边距不会影响它们的偏移来自他们的容器。

无法理解“CSS The Definitive Guide 3rd Edition”中的一段

1 个答案:

编辑：