[CSS]マージンとパディングの使い分けをおさらい

CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。

When to Use Margins and Padding

• マージン(margin)を採用する場合
• パディング(padding)を採用する場合
• ブラウザによる問題

マージン(margin)を採用する場合

• borderの外側にスペースが必要な場合。
• スペースに背景色(画像)を適用したくない場合。
• 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。
  例：15px + 20px の場合、スペースは20px。
  ※相殺されない場合もあります。

パディング(padding)を採用する場合

• borderの内側にスペースが必要な場合。
• スペースに背景色(画像)を適用したい場合。
• 上下に隣接したボックスにスペースを設ける場合、上下に指定した合計の値を有効にしたい場合。
  例：15px + 20px の場合、スペースは35px。

ブラウザによる問題

IE5.x, 6では、float指定したボックスにマージンを指定すると、左側が指定された値の2倍のマージンになってしまう場合があります。
その場合、「padding」を使用したり、ボックスに「display:inline;」を指定することにより回避できます。

Post on:2008年3月18日