20

假设我们有以下代码：

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

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

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

4

1 回答 1

21

发生这种情况是因为您的利润被允许崩溃。某些边距可能重叠（主要是块元素）并形成由计算元素样式规则中定义的两个值中的较大者定义的组合边距 - 这就是这里发生的事情。CSS Box Model文档中的这一部分详细解释了它。

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

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

我叉了阿什利的小提琴来演示。可能还有其他方法，但如果需要，这些方法是一种快速绕过可折叠边距的肮脏方法。

于 2013-02-05T09:31:39.947 回答