In CSS, the "margin" of element has no effect for the "height" of its parent?

Question

Following is the snippet (demo on JSFiddle)

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    background-color: red;
}

<div id="outer">
    <div id="inner">
        test
    </div>
</div>

As can be seen in the demo, the #inner element has a margin-bottom.

I expected the height of #outer will be large enough to include the outline of #inner margin. And the output will have a red bar below the yellow bar.

However, I found the #outer's height is not changed at all though I added the rule margin-bottom: 50px for #inner.

Does anyone have ideas about this? And is there a way to ensure the content area of parent is large enough to hold the outline of its child's margin?

Also, apart from giving a hack solution, it would be great if the answer can include some explanation or links to related document/article. And why is the margin rule designed like this.

Thanks!

Answer 1

What you are seeing is the collapsing margins problem.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

Out of the three cases, yours is the case of collapsing margins between parent and child elements.

If there is no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

If you add another element just after your parent div you will see that the margin ends up outside of it. The snippet below, shows you the collapsed margin:

#inner { background-color: yellow; margin-left: 50px; margin-bottom: 50px; }
#outer { background-color: red; }

<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>You can see the collapsed margin above this text outside of the parent div.</p>

Here is the reference from the specs: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

---

How to fix this?

The solution is given in the quoted ref text itself above. Just apply any one of these to your parent div - border, padding, height, min-height, or max-height.

Easiest way to fix this would be to add a border to your outer div:

#outer { background-color: red; border: 1px solid gray; }

Better still, apply padding to the parent div instead of the margin on inner one.

#outer { background-color: red; padding-bottom: 50px; }

Examples:

Fiddle (with border): http://jsfiddle.net/abhitalks/rrtfhyky/1/

Fiddle (with padding): http://jsfiddle.net/abhitalks/rrtfhyky/2/

Snippet (with padding):

#inner { background-color: yellow; margin-left: 50px; }
#outer { background-color: red; padding-bottom: 50px; }

<div id="outer">
    <div id="inner">
        test
    </div>
</div>
<p>Some text that follows.</p>

Answer 2

I had the same problem, just add overflow: auto to #outher div and it will fix the parents height

#inner {
    background-color: yellow;    
    margin-left: 50px;
    margin-bottom: 50px;
}
#outer {
    overflow: auto;   /* ADDED */
    background-color: red;
}

<div id="outer">
    <div id="inner">
        test
    </div>
</div>