Inner div's margin affecting containing div's margin

Question

I have an inner div inside a containing div.

HTML

<div id="container">
  <div id="inner"></div>
</div>

CSS

#container {
    width: 100px;
    height: 100px;
    background-color: red;
}
#inner {
    margin: 30px;
    width: 40px;
    height: 40px;
    background-color: black;
}

Fiddle

http://jsfiddle.net/8xUTJ/4/

I expect this to make a small black box centered vertically and horizontally in a bigger red box. Instead I get a black box stuck to the top of the red box, and the red box has the margin-top.

Can someone explain what CSS thinks it is doing here?

Answer 1

Add overflow:auto to the #container div.

jsFiddle example

Or

add a border to the #container div.

You can read more about this collapsing margin behavior at the W3C.