CSS边距加起来还是合并？

Question

我们假设我们有以下代码：

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

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

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

Answer 1

这种情况正在发生，因为您的边距可能会崩溃。某些边距可能重叠（主要是块元素），并形成由计算元素样式规则中定义的两个值中较大值定义的组合边距 - 这就是这里发生的事情。 This section文档中的CSS Box Model详细说明了这一点。

编辑：作为一个兴趣点，您可以通过几种方式解决这个问题（即打破可折叠的边距）而不会破坏事物（很多？）

• 制作元素width: 100%; display: inline-block
• 在元素之间放置一个height: 0; width: 0; overflow: hidden块，并在其中放置一个点或其他内容。

我分叉阿什利的fiddle来证明。可能还有其他方法，但如果需要，这些方法可以快速绕过可折叠边距。