Collapsing vs non-collapsing margins

by agib

HTML

<h2>Collapsing margins</h2>
<div class="outer">
    <div class="small">50px</div>
    <div class="big">100px</div>
</div>

<h2>Non-collapsing margins</h2>
<div class="small">50px</div>
<div class="big">100px</div>

<div class="outer">
    empty
</div>

CSS

* {
    font-family: Arial;
}
.outer {
    margin-bottom: 50px;
    outline: 1px solid black;
    background-color: #ccc;
}
.big,
.small {
   width: 100%;
   height: 50px; 
}
.big {
    margin-bottom: 100px;
    background-color: blue;
    color: white;
}
.small {
    margin-bottom: 50px;
    background-color: yellow; 
}