SOURCE

<div class="box1">下边距margin为20px</div>
<div class="box2">上边距margin为50px</div>
<h3>上图中，两个div实际边界为50px</h3>

<div class="box3">下边距margin为20px</div>
<div class="content"><div class="box4">上边距margin为50px</div></div>
<h3>上图中，两个div实际边界为70px</h3>

.box1 {
    width: 200px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
}
.box2 {
    margin-top: 50px;
    width: 200px;
    height: 50px;
    background-color: green;
}

.box3 {
    width: 200px;
    height: 50px;
    background-color: red;
    margin-bottom: 20px;
}
.content {
    overflow: hidden;
}
.box4 {
    margin-top: 50px;
    width: 200px;
    height: 50px;
    background-color: green;
}