このページはBlog | hamashun.comのエントリー、縦方向に重なるmarginの解釈のサンプルページです。

.a {
 margin: 3em 0;
 background: #66ffcc;
}

.b {
 margin: 3em 0;
 border: solid 1px #666;
 background: #66ffcc;
}

p {
 margin: 1em 0;
 background: #ffffcc;
}

<div class="a">
<p>親要素にborderやpaddingが無い状態</p>
</div>

<div class="b">
<p>親要素にborderやpaddingがある状態</p>
</div>