Question

这是我的标记

CSS

body{
    background-color:#353535;    
}
#parent{
    background-color:#eee;
}
#child{
    background-color:#1b1b1b;
    margin:60px auto 10px;
    width:100px;
}

HTML

<div id="parent">
    <div id="child">child</div>
</div>

结果：http://jsfiddle.net/W74TZ/

Answer 1

Margin collapsing rules。如果margin-top到达<body>的顶部而没有任何冲突（如填充顶部：#parent上的1px）那么父级将“继承”它。

您可以通过在padding-top:60px上设置#parent来避免这种情况。

Answer 2

这是CSS规范的一部分。你可以通过谷歌搜索“边缘折叠”来阅读更多内容，例如： http://www.howtocreate.co.uk/tutorials/css/margincollapsing

为什么div的位置会受到孩子边缘的影响？

2 个答案: