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

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

次のサンプルは、(1)が比較用のimgの兄弟要素で、(2)が本題のブロックの兄弟要素になります。
サンプル(1)は、横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をとります(構造図解参照)。

サンプル(1)

サンプル(1)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>

サンプル(1)の構造図解

 

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

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

サンプル(2)

box01
box02
box03

サンプル(2)の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>

戻るボタン