paddingプロパティ
paddingプロパティは、エレメントの表示領域内に設定される余白を定義するプロパティです。borderより中に設定されます。 padding-top、padding-bottom、padding-left、padding-rightプロパティを一括で指定できます。
paddingプロパティは、「width値＋padding値」分だけボックスの領域が確保されます。しかし、内容が表示できる領域は「width値」分だけです。
気をつけなければならないことは、「width値＋padding値」分だけ親要素が拡がってしまいます。そのために「width値＋padding値」が親要素より小さくする必要があります。
もし親の領域内にpaddingやborderを収めたい場合は、box-sizingプロパティによって親の領域に収めることができます。その分だけ内容の領域はより小さくなります。
背景画像についてですが、paddingプロパティは内容の周りに余白を設けるものの領域全体にバックグランドは表示されます。エレメント全体に背景画像を表示したい場合はmarginよりpaddingプロパティを使うべきです。
値の設定数によって上下左右の余白の量を設定できます。
| 値を1つ | 上下左右で同じ値 |
| 値を2つ | 上下、左右 |
| 値を3つ | 上、左右、下の設定 |
| 値を4つ | 上、右、下、左の設定 |
padding: 1em;
構文(Syntax)
CSS
padding: [ top-length right-length bottom-length left-length ] | initial | inherit;
DOM(JavaScript)
String = object.style.padding;
object.style.padding="[ top-length right-length bottom-length left-length ] | initial | inherit";
設定値(Values)
| Value | 摘要 |
|---|---|
| 0 | 初期値（default値） |
| top-length right-length bottom-length left-length | CSS長さの単位 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | 0 |
| 継承（Inherited） | No |
| CSS Animation | Yes |