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

padding,margin

 padding、borderとmarginはエレメントの利用できる領域の外側に余白を設定するプロパティです。「width値+padding、border、margin値」分だけ領域が確保されます。
 borderは表示され、padding、marginは非表示です。

padding

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

 値の設定数によって上下左右のpaddingの量を設定できます。

値を1つ指定上下左右で同じ値になります。
値を2つ指定上下、左右の設定になります。
値を3つ指定上、左右、下の設定になります。
値を4つ指定上、右、下、左の設定になります。

padding動作の確認

margin

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

 値の設定数によって上下左右のpaddingの量を設定できます。

値を1つ指定上下左右で同じ値になります。
値を2つ指定上下、左右の設定になります。
値を3つ指定上、左右、下の設定になります。
値を4つ指定上、右、下、左の設定になります。

margin動作の確認