他のブロックレベル要素のmargin-top

Question

以下のコードの外側のブロックレベルの要素にもマージントップが適用されているのはなぜですか？

div#a { 
    width: 175px; 
    height: 100px; 
    background-color: #333; 
} 

div#a span#b { 
    display: block; 
    width: 50px; 
    margin-top: 20px; 
    background-color: #666; 
} 

<div id="a"> 
    <span id="b">Hello World</span> 
</div> 

Answer 1

それが原因 "崩壊マージン" にあります：

• 良い説明：http://reference.sitepoint.com/css/collapsingmargins
• スペック：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

あなただけの修正後にしている場合は、overflow: hiddenを試してみてくださいon div#a。