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!

Abhitalks · Accepted Answer · 2015-10-27T08:36:30.127

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>

+1 for the explanation, though a border seems like a rather intrusive fix. A more natural solution would be to change the inner element margin to outer element padding. There are a number of other ways to block margin collapse, as described [here](http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work/9519933#9519933), though most of them have pretty adverse effects on layout so it's not just a matter of preference. — BoltClock, Oct 27 '15 at 08:09

score 4 · Answer 2 · answered Oct 27 '15 at 08:05

4

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>

answered Oct 27 '15 at 08:05

Kristijan Iliev

4,901
10
28
47

1

I appreciate the explanation from @Abhitalks but this was the only solution that worked for me – Jim Skerritt Feb 02 '23 at 00:28

score 1 · Answer 3 · answered Oct 27 '15 at 08:01

1

Add This CSS

#inner {
    background-color: yellow;
    margin-left: 50px;
    margin-bottom: 50px;
    display: inline-block;
}

answered Oct 27 '15 at 08:01

Jenti Dabhi

870
5
11

Florin Pop · Answer 4 · 2015-10-27T08:13:57.367

I know this common "bug", what I would do if I were you is changing the margin into padding and put it to the outer div:

My solution:

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

Also there are 3 other possible fixes:

By @Jenti Dabhi is the add the display:inline-block to the #inner div:

#inner {
    background-color: yellow;
    margin-left: 50px;
    margin-bottom: 50px;
    display: inline-block;
}

By @Chris is to add overflow: auto to the #outer div:

#outer {
    overflow: auto;
    background-color: red;
}

By @Abhitalks is to add a border to your #outer div:

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

You need to indent your code blocks with 8 spaces per line in a list. — BoltClock, Oct 27 '15 at 08:11

score 0 · Answer 5 · answered Oct 27 '15 at 08:08

give a border to outer div :

#inner {
    background-color: yellow;    
    margin-left: 80px;
    margin-bottom: 50px;
     
}
#outer {
    background-color: red;
    border:1px solid white;
      
}

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

score -2 · Answer 6 · answered Oct 27 '15 at 08:06

-2

This is a Typography concept, generally, vertical margins of adjacent elements collapse!

Have a look at this article

answered Oct 27 '15 at 08:06

Hitmands

13,491
4
34
69

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

6 Answers6

How to fix this?