CSS 边距加起来还是合并？

Question

假设我们有以下代码:

<div style="margin-bottom:100px;">test</div>
<div style="margin-top:100px;">test</div>

我注意到有时它会在元素之间创建 100 像素的边距，有时是 200 像素(当我们使用我不熟悉的某些设置时)。我在规范中找不到任何相关信息。这取决于什么？

如果我们在空白文档中有 h1 和 p 那么 h1 的边距将与 p 的边距合并。他们不会加起来。将使用较大的那个。

Answer 1

发生这种情况是因为您的边距被允许折叠。某些边距可能会重叠(主要是 block 元素)并形成由计算元素样式规则中定义的两个值中的较大值定义的组合边距 - 这就是这里发生的情况。 This section来自 CSS Box Model文档对此进行了详细解释。

编辑:作为一个兴趣点，您可以通过几种方式在不破坏东西(很多？)的情况下解决这个问题(即破坏可折叠边距)

• 制作元素 width: 100%;显示:内联 block
• 放置一个高度:0；宽度:0； overflow: hidden block 在元素之间并在其中放置一个点或其他内容。

我 fork 了 ashley 的 fiddle展示。可能还有其他方法，但如果需要，这些方法是绕过可折叠边距的一种快速但肮脏的方法。