垂直marginは相殺（折りたたみ）することを考えてボックスに余白をつける

2009年5月 3日 07:15 | 個別ページ

当blogの以下の記事（４．マージンボックス）でも紹介しているように、隣接しているあるいは入れ子になっているボックスにおいて、垂直方向のmarginは相殺されます。marginが相殺されることをmargin collapsingsというらしいです。

ここではdivのボックスの中にp要素が二つ通常フローで流し込まれているときに、どのように垂直marginの相殺に気をつけて余白をとるか考えてみます。

サンプル

div要素をボックスA、上段のp要素をボックスB、下段のp要素をボックスCとしたとき、ボックスAとボックスBあるいはボックスCの関係は「入れ子」関係にあります。一方、ボックスBとボックスCの関係は「隣接」関係にあります。

「入れ子」関係にある場合は、内包している要素、つまりボックスAにpaddingを指定して余白を設けます。

「隣接」関係にある場合は、隣接する側には片方のブロックだけにmarginを指定して余白を設けます。

(X)HTMLコード

<div>
   <p>
      ボックスB
   </p>
   <p>
      ボックスC
   </p>
</div>

CSSコード

div {
   padding:10px;
   background:#E2DEDF;
}

p {
   margin:0 0 10px 0;
   background:#FFCAD8;
}

サンプル

しかしこれでは、下段のp要素の下に必要以上に余白が空いてしまいます。なので、下段のp要素だけ「class="bottom"」を記述し下方のmarginを0にします。

(X)HTMLコード

<div>
   <p>
      ボックスB
   </p>
   <p class="bottom">
      ボックスC
   </p>
</div>

CSSコード

div {
   padding:10px;
   background:#E2DEDF;
}

p {
   margin:0 0 10px 0;
   background:#FFCAD8;
}

p.bottom {
   margin:0;
}