垂直外边距是否在所有浏览器中可靠且一致地折叠？

Question

垂直外边距是否在所有浏览器中可靠且一致地折叠？

3

我正在尝试理解margin对两个元素的影响。我有以下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; }

所以我已经给段落标记添加了50像素的底部边距，给pre标记添加了40像素的顶部边距。因此，我期望它们之间有90像素的垂直距离，但实际上只有50像素。

我知道这是因为 边距合并，如果想要解决这个问题，我需要在pre标签中添加display: inline-block。但是这会导致pre标签的宽度合并。

同样地，我知道我可以通过在pre标签中添加width: 100%来解决宽度问题，但是我在pre标签上使用了padding (20px)，因此这会导致我的元素太宽。我知道可以使用box-sizing来解决这个问题，但是必须通过调整宽度、显示和盒模型属性来获得所需的垂直间距留下了许多麻烦。所以我不想再试了。

相反，我决定只需向pre标记添加margin-top: 90px，这将确保我获得所需的90像素空间。

我的问题是：是否存在任何浏览器不会折叠边距？ 我会无意中得到140像素的空间（从pre标记的顶部边距90像素+段落标记的底部边距50像素）吗？换句话说，边距在所有浏览器中都是可靠和一致的，还是有一些浏览器会有自己的处理方式？

- stephenmurdoch

据我所知，所有浏览器在“margin-collapse”方面都是一致的。对我来说，“所以我拒绝做任何这样的事情。”似乎有点过度热情，但这是一个选择问题……虽然可能不是最佳实践。 - Paulie_D

1

这可能会有所帮助：如何禁用边距折叠。 - Paulie_D

我理解你的沮丧。 - Oriol

@Paulie_D - CSS有一个名为“Clearance”的神秘功能，它会影响到边距折叠，而Chrome对此处理得非常糟糕。但对于像OP这样的简单情况，我同意，边距折叠是一致实现的。 - Alohci

1

@StephanMuller - clear 不完全等同于“清除”。只有当元素的清除导致元素向垂直方向移动时，才会发生清除。当这种情况发生时，它会对边距折叠产生影响。要查看其效果，请比较在 IE 或 Firefox 中 http://jsfiddle.net/07vm3189/ 的效果与 Chrome 中的效果。IE/Firefox 的行为是正确的，并且我在回答这个问题中对此进行了更详细的讨论。 - Alohci

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephan Muller · Accepted Answer

这个问题很宽泛，很难给出一个确定的答案。 "所有浏览器" 涵盖了很多种浏览器，可能会有一些你从未听说过的边缘浏览器会以不同的方式处理这个问题。这完全取决于浏览器的CSS渲染引擎是如何编写的。

话虽如此，任何想要被认真对待的浏览器都会尝试遵守W3C规范，关于边距折叠，该规范有以下说明：

在CSS中，两个或多个框的相邻边距（可能是兄弟也可能不是）可以合并形成单个边距。这种组合的边距称为折叠边距。

相邻的垂直边距会折叠，但有以下例外：

- 根元素框的边距不会折叠。 - 如果具有间隔的元素的顶部和底部边距相邻，则其边距会与后续同级元素的相邻边距折叠，但结果边距不会与父块的底部边距折叠。

水平边距永远不会折叠。

来源：Box Model (w3.org)

我想把你的代码在尽可能多的浏览器中测试一下，这应该是一个不错的补充。我创建了一个测试页面，使用了你的HTML（稍作修改），其中有一个绝对定位的50像素高的块，应该正好位于折叠边距之间，以便更容易地发现差异：

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

然后我运行了这个网址通过browsershots.org来获取浏览器如何显示这段HTML的屏幕截图： http://browsershots.org/http://files.litso.com/playground/margin.html# （我不知道这个缓存会持续多久，但我想你可以再次运行它）

有趣的是，在许多屏幕截图中，蓝块的定位偏离了几个像素。您仍然可以看出边距正确地折叠，但我确实想知道定位问题具体是什么。

唯一似乎不能正确折叠边距的浏览器是Debian 6.0上的Dillo 3.0.2和Links 2.7，它们似乎根本不听取填充或边距属性（也不关心绝对定位）。无论如何，它们都会破坏您的布局，您不必担心。人们使用这样的浏览器是有特定原因的，并且以您想要的方式查看页面不是其中之一。

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