垂直边距是否在所有浏览器中可靠且一致地折叠？
Do vertical margins collapse reliably and consistently across all browsers?
我试图了解边距对两个元素的影响。我有以下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。
我知道 边距正在收缩，如果我想解决这个问题，我需要在 pre 标签中添加 display: inline-block。但这会导致 pre 标签的宽度崩溃。
同样，我知道我可以通过将 width: 100% 添加到我的 pre 标签来解决宽度问题，但是我在 pre 标签上有填充 (20px)，所以这会导致我的元素太长宽的。我知道我可以使用 box-sizing 来解决这个问题，但是必须在宽度、显示和 box-sizing 上搞乱才能拥有两个元素之间所需的垂直 space 量。所以我干脆拒绝这样做。
相反，我决定将 margin-top: 90px 添加到我的预标记中，这将保证我得到 90px space我想要的。
我的问题是：是否有任何浏览器不会像其他浏览器那样折叠边距？我会不会无意中得到 140px space （距 pre 标签的上边距 90px + 距段落标签的下边距 50px）？换句话说，边距是否在所有浏览器中可靠且一致地折叠，或者是否有浏览器可以自己做事？
很难对这个问题给出明确的答案，因为它太宽泛了。 “所有浏览器”是很多浏览器。总会有一些你从未听说过的边缘浏览器以不同的方式处理这个问题。这完全取决于浏览器的 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.
我认为将您的代码在尽可能多的浏览器中进行测试是一个很好的补充。我为您的 html 制作了一个测试页（稍作修改），其中有一个绝对定位的 50px 高块，它应该恰好位于折叠边距之间，以便更容易发现差异：
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：是的，可以肯定地说，所有浏览器都会可靠且一致地折叠这些元素。
我试图了解边距对两个元素的影响。我有以下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。
我知道 边距正在收缩，如果我想解决这个问题，我需要在 pre 标签中添加 display: inline-block。但这会导致 pre 标签的宽度崩溃。
同样，我知道我可以通过将 width: 100% 添加到我的 pre 标签来解决宽度问题，但是我在 pre 标签上有填充 (20px)，所以这会导致我的元素太长宽的。我知道我可以使用 box-sizing 来解决这个问题，但是必须在宽度、显示和 box-sizing 上搞乱才能拥有两个元素之间所需的垂直 space 量。所以我干脆拒绝这样做。
相反，我决定将 margin-top: 90px 添加到我的预标记中，这将保证我得到 90px space我想要的。
我的问题是：是否有任何浏览器不会像其他浏览器那样折叠边距？我会不会无意中得到 140px space （距 pre 标签的上边距 90px + 距段落标签的下边距 50px）？换句话说，边距是否在所有浏览器中可靠且一致地折叠，或者是否有浏览器可以自己做事？
很难对这个问题给出明确的答案，因为它太宽泛了。 “所有浏览器”是很多浏览器。总会有一些你从未听说过的边缘浏览器以不同的方式处理这个问题。这完全取决于浏览器的 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.
我认为将您的代码在尽可能多的浏览器中进行测试是一个很好的补充。我为您的 html 制作了一个测试页（稍作修改），其中有一个绝对定位的 50px 高块，它应该恰好位于折叠边距之间，以便更容易发现差异：
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：是的，可以肯定地说，所有浏览器都会可靠且一致地折叠这些元素。