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

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

ボックスモデルのマージンとパディングのイメージ図

When to Use Margins and Padding

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

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

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

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

ブラウザによる問題

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

top of page

©2017 coliss