margin-top on a block level element within another

Why does the outer block level element in the code below also have the margin-top applied to it?

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"&g开发者_StackOverflow社区t;Hello World</span>
</div>

---

It's due to "collapsing margins":

• A good explanation: http://reference.sitepoint.com/css/collapsingmargins
• The spec: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

If you're just after a fix, try overflow: hidden on div#a.