爲什麼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影響？

回答

相關問題