Question

将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个像素。

为什么呢？请解释一下。

Answer 1

该行为称为collapsing margins。不添加边距值，但使用更高的值：

垂直边距可能会在某些框之间崩溃：


正常流动中的两个或多个相邻的块箱垂直边缘坍塌。得到的边距宽度是相邻边距宽度的最大值。 [...]

[...]

Answer 2

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

Answer 3

如果你想获得所需的效果，你可以使用“填充”，边距总是崩溃

CSS边缘奇怪的行为，为什么？

3 个答案: