margin not overlap when the outer explicit set height - html

Question

I wonder why the phenomenon will happen?
the inner div set margin-bottom 16px
As far as I know,the outer div contact with the inner div,no padding or border,if the outer div isn't set height css style,the under div will 16px away from the outer div, because the margin is overlap.However,if height css style is set on the outer div,the under div is close to the outer div.
so,can you explain how this phenomenon is caused?
.outer {
background: yellow;
height: 100px;
}
.inner {
height: 100px;
background: green;
margin-bottom: 16px;
}
.under {
background: red;
height: 10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>

Answer 1

So first things first, let's address this:
if you remove height css style on the outer div,you will find the under div is move down
This is due to Margin Collapsing:
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.
Your child margin is collapsing with the parent margin, thus the 16px margin acts as part of the parent.
However by specifying a height, you negate margin collapsing.
From the W3 Box Model spec*:
Two margins are adjoining if and only if:
Both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
The bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
Because the margins do not collapse, the child's margin will simply attempt to expand the height of the outer div (which won't be reflected, because the parent has a strictly set height of 100px).
But wait... what if we broke the collapse some other way? Would we see the height increase by 16px?
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
Seems easy enough. Let's add a border to break this rule.
.outer {
background: yellow;
border-bottom: 1px solid black;
}
.inner {
height: 100px;
background: green;
margin-bottom: 16px;
}
.under {
background: red;
height: 10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
Voila! As expected, the margins do not collapse, therefore the child's margin attempts to expand the height of the parent. With no height property on the parent to counter this, the height of the parent grows to 116px.
* This is pointing at an older spec, however this behavior has not changed. In fact, some of the newer spec documents I've found reference/link to this one.

Answer 2

You cannot add a margin to child element to affect on a parent element. You may add margin-bottom:16px; to Outer class as below
.outer{
background:yellow;
height:100px;
margin-bottom:16px;
}

Answer 3

inner is nested inside outer, and under is directly underneath outer with no space or padding. So regardless of the margin given to inner, there'll be no space between outer and under.
You can do this by simply adding a margin-top to under.
.outer{
background:yellow;
height:100px;
}
.inner{
height:100px;
background:green;
}
.under{
background:red;
height:10px;
margin-top:16px;
}

Answer 4

set .outer height:auto;
.outer{
background:yellow;
height:auto;
}
.inner{
height:100px;
background:green;
margin-bottom:16px;
}
.under{
background:red;
height:10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>