当 DIV 为空时，CSS 属性被传递给父元素答案

【问题标题】：CSS properties being passed up to the parent element when the DIV is empty当 DIV 为空时，CSS 属性被传递给父元素
【发布时间】：2013-01-11 10:38:07
【问题描述】：

这个问题发生在我的 IE8 和 Chrome 上，这让我觉得这是一个标准问题。

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

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

<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（它的父级）也没有任何内容，它会使属性冒泡。

发生了什么事？

【问题讨论】：

标签： css html margin

【解决方案1】：

我认为您正在访问margin collapsing。

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

【讨论】：

【解决方案2】：

是的，这是一个标准的东西。这叫做margin collapsing，你在IE7中看不到的原因很可能是IE7弄错了。

边距有点棘手，因为它们没有指定元素周围的区域，而是指定元素之间的最小距离。当子元素有边距而父元素没有填充或边框时，就会发生边距折叠。边距应用于子元素和周围元素之间，而不是子元素和父元素之间。

由于某些浏览器（仅我知道的 IE）不能正确处理折叠边距，因此您现在应该避免使用它们。如果可能，请改用 padding，或在父级上设置 padding 或边框以避免边距折叠。

【讨论】：

【解决方案3】：

尝试将overflow: auto 添加到#header css 代码中。

例如，

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

编辑：似乎position: absolute 也可以。

【讨论】：

我投了赞成票，主要是因为没有解释反对票；我认为这是不公平和无礼的。

【解决方案4】：

我也遇到了这个问题，把它添加到 css 中

border: 0px solid;

【讨论】：