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

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 的底部边距，并为 pre 标签设置了 40px 的顶部边距。因此，我期望在它们之间找到 90px 的垂直距离，但只有 50px。

我知道边距正在收缩，如果我想解决这个问题，我需要将 display: inline-block 添加到 pre 标签中。但这会导致 pre 标签的宽度崩溃。

同样，我知道我可以通过将 width: 100% 添加到我的 pre 标签来解决宽度问题，但是我在 pre 标签 (20px) 上有填充，所以这导致我元素太宽。我知道我可以使用 box-sizing 来解决这个问题，但是为了获得所需的数量而必须弄乱宽度、显示和 box-sizing 是多么痛苦的一件事两个元素之间的垂直空间。所以我干脆拒绝这样做。

相反，我决定将 margin-top: 90px 添加到我的 pre 标签中，这将保证我得到 90px 我想要的空间。

我的问题是:是否有任何浏览器不会像其他浏览器那样折叠边距？我会不会无意中得到 140 像素的空间(距离顶部边距 90 像素) pre 标签 + 距段落标签底部边缘 50px)？换句话说，边距是否在所有浏览器中可靠且一致地折叠，或者是否有浏览器可以自己做事？

Answer 1

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

---

也就是说，任何想要被认真对待的浏览器都会尝试遵守 W3C 规范，这些规范对边距折叠有以下说明:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse, except:

• Margins of the root element's box do not collapse.
• If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

Horizontal margins never collapse.

来源:Box Model (w3.org)

---

我认为将您的代码在尽可能多的浏览器中进行测试是一个很好的补充。我用你的 html 制作了一个测试页面(稍作修改)，绝对定位的 50px 高 block 应该恰好位于折叠边距之间，以便更容易发现差异:

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

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

http://browsershots.org/http://files.litso.com/playground/margin.html#(我不知道这会缓存多久，但我想你总是可以再次运行它)

有趣的是，在一堆屏幕截图中，蓝色 block 的位置偏离了几个像素。您仍然可以看出边距已正确折叠，但我确实想知道定位到底有什么问题。

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

---

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