当DIV为空时，CSS属性被传递到父元素 [英] CSS properties being passed up to the parent element when the DIV is empty

问题描述

这个问题发生在我在IE8和Chrome，这让我认为这是一个标准的事情。

This problem is happening for me on IE8 and Chrome which makes me think this is a standards thing.

我创建一个网站的标题和菜单使用DIVs没有任何内容，但有背景图像和高度/宽度设置在CSS。我希望内部DIV有对父div的边距，但它应用边距到父div。将内容放在div中可以纠正这一点。 IE7没有这个问题。我不想使用& nbsp; ，因为它确实会抛出异常，似乎是一个黑客。

I am creating a site with header and menu using DIVs that do not have any content but do have background images and heights / widths set in CSS. I want the inner DIV to have margin against the parent div but it applies the margin to the parent div. Putting content within the divs corrects this. IE7 does not have this problem. I do not want to use   because it does throw things out and it seems like a hack.

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

Please see example code to recreate below:

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

If you give the parent div content or even a border the layout works correctly. I've hit this same problem a few times on this site. I wanted to give a margin-top to a list of menu items but as the headerMenu div (its parent) also does not have any content it bubbles up the property.

发生了什么事？

推荐答案

导入利润损失。

请参阅 CSS 2.1规格上的保证金崩溃更多信息。

这篇关于当DIV为空时，CSS属性被传递到父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！