備忘録的リファレンス

padding,border,marginプロパティ

 padding、border、marginプロパティは内容の外側に余白や罫線を指定するプロパティです。 隣り合ったエレメントとの間に余白を設けるために使用します。
 paddingは内容の直ぐ外側、その外側に罫線としてborderが表示できます。marginはさらに外側に表示されます。 padding、border、marginいずれもエレメントが大きくなってしまうことに注意が必要です。

padding、border、marginの表示領域について
padding,border,marginの表示領域について

「width値+padding、border、margin値」分だけ領域が確保されます。
 paddingもmarginもそれら範囲内に内容は表示されませんが、paddingは表示領域としてバックグランドの画像や色彩は表示されます。 バックグランドの画像や色彩を表示領域いっぱいに表示したい場合はpaddingを使用します。

padding

 paddingプロパティは、エレメントの表示領域内に設定される余白です。borderより中に設定されます。 padding-toppadding-bottompadding-leftpadding-rightプロパティを一括で指定できます。

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

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

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

padding動作の確認

margin

 marginプロパティは、エレメントの表示領域外に設定される余白です。 margin-topmargin-bottommargin-leftmargin-rightプロパティを一括で指定できます。
 「width値+margin値」分だけ全体の領域が確保されますが、ボックスとして表示できる領域は「width値」分だけです。

 marginプロパティもpaddingプロパティと同様に「width値+margin値」分だけ親要素が拡がってしまいます。そのために「width値+margin値」が親要素より小さい必要があります。

 marginプロパティは以下のプロパティを一括で指定できます。

margin-top
上のマージン
margin-bottom
下のマージン
margin-left
左のマージン
margin-right
右のマージン

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

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

margin動作の確認