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">Hello World</span>
</div>
It’s due to “collapsing margins”:
If you’re just after a fix, try
overflow: hiddenondiv#a.