另一个块级元素上的 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: hide 在 div#a 上。