Question

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

我正在使用DIV创建一个包含标题和菜单的网站，这些DIV没有任何内容但是在CSS中设置了背景图像和高度/宽度。我希望内部DIV对父div有保证金，但它将余量应用于父div。将内容放在div中会纠正这个问题。 IE7没有这个问题。我不想使用 ，因为它确实会把事情搞砸，而且看起来像是黑客。

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

<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内容甚至边框，则布局正常工作。我在这个网站上几次遇到同样的问题。我想在菜单项列表中给出一个margin-top，但是由于headerMenu div（它的父级）也没有任何内容，它会使该属性冒泡。

发生了什么事？

Answer 1

我认为你正在进入margin collapsing。

有关详细信息，请参阅CSS 2.1 spec on margin collapsing。

Answer 2

是的，这是标准的事情。它被称为边缘折叠，而你在IE7中没有看到它的原因很可能是因为IE7错了。

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

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

Answer 3

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

例如，

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

编辑：似乎position: absolute也适用。

Answer 4

我也遇到了这个问题并将其添加到了css

border: 0px solid;

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

4 个答案: