当 DIV 为空时，CSS 属性向上传递给父元素

Question

我在 IE8 和 Chrome 上遇到了这个问题，这让我觉得这是一个标准问题。

我正在使用没有任何内容但有背景图像和在 CSS 中设置的高度/宽度的 DIV 创建一个带有标题和菜单的网站。我希望内部 DIV 相对于父 div 有边距，但它将边距应用于父 div。将内容放在 div 中可以纠正此问题。 IE7没有这个问题。我不想使用  ，因为它确实会抛出一些东西，而且看起来像是 hack。

请参阅下面的示例代码以重新创建:

<style>

#header{
    width:600px;
    height:300px;
    background-color:red;
}

#headerMenu{
    height:100px;
    width:500px;
    margin-left:auto;
    margin-right:auto;
    background-color:blue;
    margin-top:20px;
}

</style>

<div id="header">
    <div id="headerMenu">
    </div>
</div>

如果您为父 div 提供内容甚至边框，则布局可以正常工作。我在这个网站上遇到过几次同样的问题。我想为菜单项列表提供边距顶部，但由于 headerMenu div(其父级)也没有任何内容，因此它使属性冒泡。

这是怎么回事？

Answer 1

我认为您正在运行 margin collapsing .

参见 CSS 2.1 spec on margin collapsing了解更多信息。