在"CSS The Definitive Guide 3rd edition",第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;}
任何人都可以向我解释一下吗？非常感谢.
我创建了一个小提琴,提供了正在讨论的代码的实例.如果您使用的是Chrome或类似的现代浏览器,则可以右键单击示例中的段落,然后选择"检查元素"以查看填充和边距的交互方式.
我同意,该段是可怕的.它首先说明"水平边距不会崩溃",然后提供一个示例,其中没有相邻的水平边距来演示断言.这个例子的确具备相邻的垂直虽然利润率(第一段的底部边缘,以及第二段落的上边距),我们可以看到,这些做崩溃(它们占据相同的空间:检查一个元素,然后对方看到这一点).
然而,这与示例中演示的非堆叠偏移无关,即段落的非相邻边距从包含div 的填充边缘偏移它们- 因此为什么第一段的顶部,左边,右边缘50px来自div的外边缘(20px边距来自<p>+ 30px填充<div>).
我认为这个例子的准确标题最好写成
通常,边距,填充和边框不会崩溃 - 除了块级元素的垂直边距(在规范中定义了例外).内联元素的定位不受垂直尺寸的影响.
修正了替代标题中的轻微不准确性:例外情况以及原始段落"水平边距不崩溃"的断言仍未得到证实:我在这里创建了一个类似的小提示来证明这一点.
在第二个例子中,我们用s 替换了内联<span>元素<p>,这允许我们看到水平地相互自然流动的元素:与第一个例子不同 - 第二个段落的上边距折叠成第一个段落的下边距 - 第二个段落的左边距不会折叠到第一个右边距,而是立即开始 - 将它们40px分开.
顺便提一下,这也表明内联元素的垂直填充,边框和边距确实崩溃:这些跨度的顶部和底部填充和边距不会影响它们与容器的偏移.