始终显示更大的边距。

Question

我已经给一个块设置了底部25px的下边距和10px的上边距。那么总边距应该是35px，但是它只显示了25px。如果我给它35px的边距，那么就显示35px的总边距。为什么它总是显示更大的边距呢？

以下是代码行：

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</P>
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p>

- Faisal Akhter

---

“但它显示了25像素”是什么意思？你怎么看到那25像素的？ - Steeven

@FaisalAkhter 如果其中一个答案对您有帮助，请考虑将其标记为答案。 - Jace

Answer 1

它被称为“折叠边距”。这是正常的，并符合W3标准。它说：

根元素框的边距不会折叠。

如果具有间隙的元素的顶部和底部边距相邻，则其边距与后续兄弟节点的相邻边距折叠，但该结果边距不会与父块的底边距折叠。

更多信息：http://www.w3.org/TR/CSS21/box.html#collapsing-margins 因此，您的两个<p>标签：

<p style="margin-bottom:25px; outline:1px dashed #000000;">aaaaaaaaaaaa</p>
<p style="margin-top:10px; outline:1px dashed #000000;">bbbbbbbbbbbbbbbb</p>

然后会发生折叠。

规范还提到了边距不会折叠的情况。例如，浮动元素具有非折叠边距：

浮动框与任何其他框之间的边距不会折叠

以下是演示折叠和非折叠边距的代码:

代码片段:
http://jsfiddle.net/k8tFy/3/
(注意：您甚至可以看到浮动的<p>标签与<h2>标签的margin-bottom产生交互)

- Jace

---

“相邻边距”是指相互接触或相交的边距 - 你引用的项目列表前面的陈述明确说明了相邻垂直边距根据定义会折叠，而这些情况被列为规则的例外。 - BoltClock

现在更新我的答案，我一直称之为“相邻边距”（=/），这是错误的术语。 - Jace

Answer 2

如果简单来说，这就是边距应该起作用的方式。顶部和底部的边距可能会折叠，在这种情况下，两个块之间的最终距离将等于最大边距的宽度。

要了解更多详细信息，请查看CSS标准的此部分： http://www.w3.org/TR/CSS2/box.html#collapsing-margins 引用如下：

当两个或更多的边距折叠时，生成的边距宽度是折叠边距宽度的最大值。

可能的解决方案： 您可以像您描述的那样，将顶部元素的margin-bottom设置为35px。

另一种方法是使其中一个元素浮动：

<p style="margin-bottom:25px; outline:1px dashed #000000;clear:both;">aaaaaaaaaaaa</P>
<p style="margin-top:10px; outline:1px dashed #000000;clear:both;float:left;width:100%">bbbbbbbbbbbbbbbb</p> 

演示

上述解决方案基于您可以在上面链接的页面上找到的下一个异常：

浮动框与任何其他框之间的边距不会折叠（甚至不会在浮动框和其内部流动子元素之间折叠）。

- Viktor S.