div的边缘尊重其父母

Question

我对边缘感到困惑。我在div内容中有一个徽标。如果我给div徽标设置了一个margin-top，那么这个边距就会出现在内容和页面之间。为什么？

以下是示例：http://jsfiddle.net/bCkpb/

CSS：

#content {
    position:relative;
    margin:0 auto;
    width:300px; height:250px;
    background-color:blue;
}

#logo {
    margin:20px auto; /* Why this 20px appear between the page and the content? */
    width:120px; height:120px;
    background:yellow;
}

HTML：

<div id="content">
    <div id="logo"> </div> 
</div>

Answer 1

这是因为块级元素的上边距和第一个块级子元素的上边距始终为collapse（除非任何边框，填充，线框或间隙将它们分开）。防止此行为的一种方法是向overflow div添加除{visible}之外的#content值。您还可以将#content的显示值更改为内联块。

http://jsfiddle.net/bCkpb/3/