另一个块级元素的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。