CSS页边距奇怪的行为，为什么？
CSS页边距奇怪的行为，为什么？
提问于 2009-06-01 18:55:02
使用下面的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>这两个DIVs之间的间距只有10个像素。
为什么？请解释一下。
回答 3
Stack Overflow用户
回答已采纳
发布于 2009-06-01 19:02:13
这种行为称为collapsing margins。不会添加边距值，但会使用较高的值：
垂直页边距可能会在某些框之间折叠：
- 在正常流程中折叠两个或多个相邻的块框的垂直边距。得到的页边距宽度是相邻页边距宽度中的最大值。…
- …
Stack Overflow用户
发布于 2009-06-01 19:06:31
这是一个很好的explanation of margin collapsing。基本上，似乎所有相邻的页边距都会相互折叠，这与CSS规范和所有常识背道而驰。
Stack Overflow用户
发布于 2009-06-01 19:12:08
如果你想要得到想要的效果，你可以用“填充”来代替，页边距总是折叠的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/936186
复制相关文章
相似问题
腾讯云开发者
