Inner div not respecting margin-top relative to parent div [duplicate]

Question

Check this extremely simple html structure. One div inside another, the inner (green) div has margin-top: 100px, the outer (red) div has no margin-top. The outer div is twice (200px) as high as the inner div (100px).

So what would you expect the result to look like? If you're like me, you get the opposite of what you'd naturally expect to get.

My question is NOT how to prevent this. My question is WHY ist this happening this way consistently across all browsers? I mean, this obviously must be the way it's inteded to work, but to me it's strongly counter-intuitive.

.red {
    background-color: #a00;
    height: 200px;
}

.green {
    background-color: #0a0;
    margin-top: 100px;
    height: 100px;
}

<div class="red">
    <div class="green"></div>
</div>

http://jsfiddle.net/connexo/7txnoj7m/

Answer 1

Its normal way of rendering and it is called margin collapsing. More you can read here