TOP > CSSリファレンス > padding,margin

padding,margin

 paddingとmarginはどちらも余白を設定するプロパティです。どちらも「width値+paddingまたはmargin値」分だけ領域が確保されます。
 しかし、それらプロパティの性質上どのように余白が設定されるかに違いがあります。
 注意してみますと、borderの位置が違います。詳しくは以下を参照してください。

padding

 以下の例を見てください。paddingプロパティは、「width値+padding値」分だけボックスの領域が確保されます。しかし、利用できる領域は「width値」分だけです。
 ここで気をつけなければならないことは、「width値+padding値」分だけ親要素が拡がってしまいます。そのために「width値+padding値」が親要素より小さい必要があります。
 領域を目一杯使って、バックグランドの画像を表示したい場合はpaddingプロパティを使うべきでしょう。

padding動作の確認

margin

 marginプロパティは、「width値+margin値」分だけボックスとその周囲の余白が確保されますが、ボックスとして表示される領域は「width値」分だけです。
 marginプロパティも「width値+margin値」分だけ親要素が拡がってしまいます。そのために「width値+margin値」が親要素より小さい必要があります。

margin動作の確認