为什么div的位置受其孩子的margin-top影响？

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/

来源

2010-12-20 StoneHeart

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

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

来源

2010-12-20 20:05:06

这是CSS规范的一部分。您可以通过谷歌搜索“边缘折叠”了解更多信息，例如http://www.howtocreate.co.uk/tutorials/css/margincollapsing

来源

2010-12-20 20:04:05 Phrogz

为什么div的位置受其孩子的margin-top影响？

回答

相关问题