margin-top элемента уровня блока внутри другого

Question

Почему к внешнему элементу уровня блока в приведенном ниже коде также применяется поле margin-top?

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 на div#a.