html - 另一个 block 级元素上的 margin-top

Question

为什么下面代码中的外部 block 级元素也应用了 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

如果您只是在修复之后，请在 div#a 上尝试 overflow: hidden。