3

我给了一个块 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>
4

2 回答 2

4

它被称为“折叠边距”。这是正常的，符合 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>标签甚至与标签的margin-bottom交互<h2>）

于 2013-04-16T09:29:02.560 回答
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>

演示

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

浮动框和任何其他框之间的边距不会塌陷（甚至在浮动框与其流入的子代之间也不会塌陷）。

于 2013-04-16T09:22:24.863 回答