CSS margin 奇怪的行为，为什么？答案

【问题标题】：CSS margin strange behavior, why?CSS margin 奇怪的行为，为什么？
【发布时间】：2009-06-01 18:55:01
【问题描述】：

下面有 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <div style="width:400px;height:200px;background-color:Gray;margin-bottom:10px;"></div>
    <div style="width:400px;height:200px;background-color:Green;margin-top:10px;"></div>
</body>
</html>

这两个 DIV 之间的空间只有 10 像素。

为什么？请解释一下。

【问题讨论】：

标签： css margins

【解决方案1】：

这种行为称为collapsing margins。不添加边距值，但使用较高的值：

某些框之间的垂直边距可能会折叠：

正常流崩溃中块框的两个或多个相邻垂直边距。生成的边距宽度是相邻边距宽度的最大值。 […]

[…]

【讨论】：

有没有办法防止这种情况？我不喜欢这种行为。
为什么不把值增加到 20px？
我不会将值增加到 20px，因为我将在其他上下文中使用边距，我将在运行时将 ASP .NET 控件随机放置在不同的空间中
这不是“奇怪”的行为。是它应该如何工作。
您可以通过在元素上使用“clear:both”来防止这种行为。不过我没试过。

【解决方案2】：

这是一个很好的explanation of margin collapsing。基本上，根据 CSS 规范和所有常识，所有相邻的边距似乎都会相互折叠。

【讨论】：

【解决方案3】：

如果你想得到想要的效果，你可以使用“填充”代替，边距总是折叠

【讨论】：

填充不适合我的目的，因为我使用了 background-color CSS 属性
我认为边框是解决这个问题的正确方法，但同样，这很奇怪