Question

我试图理解保证金对两个元素的影响。我有以下HTML，请参阅dabblet：

<p>some text</p>
<pre>some code</pre>

我有以下CSS：

body { color: white; }
p { background: red; margin-bottom: 50px; padding: 20px; }
pre { background: purple; margin-top: 40px; padding: 20px; }

所以我给段落标签的底部边距为50px，而且我给前标签的顶部边距为40px。因此我期望它们之间找到90px的垂直距离，但只有50px。

我了解边距正在崩溃，如果我想解决这个问题，那么我需要将display: inline-block添加到预标记中。但这会导致预标签的宽度崩溃。

同样，我知道我可以通过将width: 100%添加到我的pre标签来修复宽度问题，但我在pre标签（20px）上有填充，因此这会导致我的元素太宽。我知道我可以使用盒子大小来处理这个问题，但是在裤裆上有多大的痛苦是因为宽度，显示和盒子大小只是为了获得所需的量两个元素之间的垂直空间。所以我只是拒绝做任何一件事。

相反，我已经决定将margin-top: 90px添加到我的预标记中，这样可以保证我拥有了我想要的 90px 空间。

我的问题是：是否有任何浏览器不会像其他浏览器一样崩溃边距？我是否会无意中以140px空间结束（距离顶部边缘90px） pre标签+段落标签底部边缘的50px）？换句话说，所有浏览器的边距是否可靠且一致地折叠，或者是否有一个浏览器可以自行完成？

Answer 1

很难对这个问题给出明确的答案，因为它非常广泛。 “所有浏览器”都是很多浏览器。总有一些你从未听说过的边缘浏览器以不同的方式处理这种情况。这完全取决于浏览器的CSS渲染引擎是如何编写的。

也就是说，任何想要认真对待的浏览器都会尝试遵守W3C规范，其中有关于保证金崩溃的说法如下：

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

相邻的垂直边距会崩溃，除了：


根元素框的边距不会折叠。

如果具有间隙的元素的顶部和底部边距相邻，则其边缘会随着后续兄弟的邻接边缘而折叠，但是所产生的边距不会随着父块的下边距而崩溃。


水平边距永不崩溃。

来源：Box Model (w3.org)

我认为在尽可能多的浏览器中将代码放到测试中是一个很好的补充。我制作了一个你的html测试页面（稍加修改），一个绝对定位的50px高块，应该适合在折叠边缘之间，以便更容易发现差异：

http://files.litso.com/playground/margin.html

然后我通过browsershots.org运行它来获取浏览器如何显示这段HTML的屏幕截图：

http://browsershots.org/http://files.litso.com/playground/margin.html# （我不知道这会持续多长时间，但我想你总是可以再次运行它）

有趣的是，在一堆屏幕截图中，蓝色块的位置只有几个像素。你仍然可以告诉边缘是否正确折叠，但我确实想知道定位究竟是什么问题。

唯一没有正确折叠边距的浏览器是Dillo 3.0.2和Debian 6.0上的Links 2.7，它们似乎都没有听取填充或边距属性（也不是绝对定位））。无论如何，它们都会弄乱你的布局，你不应该担心它。人们出于某种特定原因使用这些浏览器，并且完全按照您的意图查看您的页面并不是其中之一。

TL; DR ：是的，可以肯定地说所有浏览器都可靠且一致地折叠这些元素。

所有浏览器的垂直边距是否可靠且一致地崩溃？

1 个答案: