我有一个非常简单的html。红色 div 位于蓝色 div 内部，并且上边距为 10 像素。在非 ie 浏览器上，蓝色框距离视口顶部 10 px，红色 div 位于蓝色 div 的最顶部。我期望的是 ie 行为：红色 div 必须距蓝色 div 顶部 10 px。为什么非ie浏览器会这样渲染？ （我认为错误的行为是 IE 的行为，但为什么呢？）
并且，执行此操作的正确方法是什么？
为什么空白？ http://img92.imageshack.us/img92/7662/blankmr7.jpg
<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
background-color: #00f;
height: 50px;
}
.inner
{
height: 20px;
width: 20px;
background-color: #f00;
margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
尽可能斯特拉格的回答已经解释了你需要知道的为什么会发生——也就是说，它的发生方式是在 IE 以外的浏览器中发生的，因为规范是这么说的——我认为他从以下部分中选择了错误的引用CSS 2.1 规范 about 边缘塌陷.
他引用的观点解释了边距如何折叠，而不是它们如何“移动”到父元素。
这就是解释它的原因：
- If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
- 如果元素的边距与其父级的上边距折叠在一起，则框的上边框边缘将定义为与父级的相同。
或者，以更易于人类阅读的形式Mozilla 开发者文档:
父母和第一个/最后一个孩子：
如果没有边框、内边距、内联内容或间隙来分隔块的 margin-top 与其第一个子块的 margin-top，或者没有边框、内边距、内联内容、高度、最小高度或最大-height 将块的 margin-bottom 与其最后一个子块的 margin-bottom 分开，然后这些边距折叠。折叠的边距最终位于父级之外。
至于如何修复它，我可能会选择overflow: auto解决方案克里斯·劳埃德建议（尽管可能有副作用）。
但这实际上取决于代码的其余部分到底是什么样子。在这个简单的例子中，您可以轻松地更改margin在子元素上padding在父元素上。
或者您可以浮动子元素，或者绝对定位它......
或者反转怎么样clearfix如果你想变得非常奇特：
.outer:before {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
