html - 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

这是因为块级元素的上边距和它的第一个块级子元素的上边距总是会折叠（除非任何边框、填充、行框或间隙将它们分开）。防止这种行为的一种方法是向div添加一个overflow不可见的值。#content您还可以将显示值更改#content为 inline-block。

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