→ 「CSS　marginの再確認・入れ子ブロックの上下marginの相殺」

レイアウトデザインをしていて、ブロックが入れ子になることは多々あります。この入れ子が複雑な構造になってくると、縦方向のmarginが効かなくなると錯覚することがよくあります。この多くは、ブロックのmarginが仕様で相殺されることに起因します。

隣接する兄弟要素による上下marginの結合（相殺）

次のサンプルは、（１）が比較用のimgの兄弟要素で、（２）が本題のブロックの兄弟要素になります。
サンプル（１）は、横700px、縦auto、margin-left: auto、margin-right: autoに設定した親box（紺色地に縦横10ピクセルの白のマス目の背景）の中に子の兄弟要素として、imgを縦に並べています。

img01は「margin-bottom:20px」、img02は「margin-top:10px;margin-bottom:20px」、 img03は「margin-top:30px」を指定していて、そのままのmarginをとります（構造図解参照）。

サンプル（１）

サンプル（１）htmlソース

  <div class="oyabox">
    <img style="margin-bottom:20px;" src="img2/title01.gif">
    <img style="margin-top:10px;margin-bottom:20px;" src="img2/title02.gif">
    <img style="margin-top:30px;" src="img2/title03.gif">
  </div>

サンプル（１）の構造図解

　

これが隣接するブロックの兄弟要素の場合、図解の赤字部分のbottomとtopが結合し、どちらかの大きい方の値に相殺されます。

サンプル（２）は、（１）と同じ親boxの中に、imgと替えてbox（div）を縦に並べています。それぞれのmargin指定は、（１）のimgのときと同じです。隣接するbox01の「margin-bottom:20px」とbox02の「margin-top:10px」が結合、 相殺されて二つのboxの間のmarginは20pxになります。同じくbox02の「margin-bottom:20px」とbox03の「margin-top:30px」が結合、相殺されてこの二つのboxの間のmarginは30pxになります。

サンプル（２）

サンプル（２）のhtmlソース

  <div class="oyabox">
    <div class="box01" style="margin-bottom:20px;">box01</div>
    <div class="box02" style="margin-top:10px;margin-bottom:20px;">box02</div>
    <div class="box03" style="margin-top:30px;">box03</div>
  </div>