块级元素内的margin-top属性

Question

为什么下面代码中的外层块级元素也应用了 margin-top？

注：margin-top 是 CSS 属性，指定元素顶部与其父元素顶部之间的空间。

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>

- Jai

Answer 1

这是由于“折叠边距”导致的：

• 一个好的解释：http://reference.sitepoint.com/css/collapsingmargins
• 规范：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

如果你只是想要修复，请在 div#a 上尝试使用 overflow: hidden。

- thirtydot