Why does this CSS margin-top style not work?

Question

I try to add margin values on a div inside another div. All works fine except the top value, it seems to be ignored. But why?

What I expected:
<

Answer 1

Try using display: inline-block; on the inner div.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}