3

有下面的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 个像素。

为什么？请解释。

4

3 回答 3

6

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

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

  • 正常流程中两个或多个相邻的块框垂直边距折叠。生成的边距宽度是相邻边距宽度的最大值。[…]
  • […]
于 2009-06-01T19:02:13.193 回答
1

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

于 2009-06-01T19:06:30.517 回答
1

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

于 2009-06-01T19:12:07.697 回答