コニファ・ロゴ

ツール集:CSS marginの再確認・入れ子ブロックの上下marginの相殺

関連ページ → 「CSS marginの再確認・隣接するブロックの上下marginの相殺」

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

親要素と子要素の先頭または末尾との間で上下marginの相殺

親要素自身のtopのmargin(0の場合も含めて)があり、ブロック子要素の先頭にもtopのmarginがある場合にtop方向のmarginの相殺が起こります。また、bottom方向のmarginも同様に相殺が起こります。

margin相殺を確認しやすくするため、親と子のブロックの入れ子をbody要素の直下に置いたサンプルページを別に作っています。→ サンプルページ(別窓または別タブで開きます)

サンプルは、次の図解のようになります。「親要素1」の中にはブロックが、「親要素2」の中にはimgがそれぞれ上下marginがともに20pxで並んでいます。「親要素1」の中のブロックのmarginは「隣接するブロックの上下marginの相殺」のとおりに相殺されています。親要素2」の中のimgは相殺されずそのままのmargin空間をとっています。

サンプルの図解

「親要素1」のtopのmarginは10pxを指定しています。ブロック子要素の先頭「box01」のtopのmarginは20pxです。この二つのmarginが相殺され、大きいほうである「box01」分の20pxが「親要素1」からとび出しています。

また、「親要素1」のbottomのmarginは30pxを指定しています。ブロック子要素の末尾「box03」のbottomのmarginは20pxです。この二つのmarginが相殺され、大きいほうである「親要素1」分の30pxが「親要素1」の下に展開されます。

このとき、「親要素2」と「親要素1」は隣接するブロックの兄弟要素になるため、「親要素2」のtopのmarginと「親要素1」のbottomのmarginも相殺の対象になりますが、「親要素2」のtopのmarginが20pxと小さいため、30pxがそのまま残っています。

サンプルのhtmlソース

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

 

 

 

 

戻るボタン