[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;」を指定することにより回避できます。

Post on:2008年3月18日


top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

Comments

DOGEAR

on 2008年3月18日

スペースに背景色(画像)の適用ですが、
マージンとパディングが逆じゃないですか…？

コリス

on 2008年3月18日

> DOGEAR さん

あっ、文章を見直している間に逆になってました、、、

背景の箇所を修正しました。
ありがとうございました。

日々、ウェブデザインとネットニュースとゲームとか。

on 2008年3月19日

夜の花粉症。…

最近、花粉症で一番辛いのは、お風呂上りだったりします。
洗濯したタオルや服に花粉が付いてるのか、くしゃみと鼻水が止まりません。
ä»Šã‚‚é… (more…)

WEB上で学ぶ、CSS基本とWeb制作 « Advernya's Memo Blog

on 2010年7月17日

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

top of page

©2011 coliss