11. ボックスモデル（パディング）
ここでは、ボックスモデルにおけるパディング幅のプロパティについて説明する。
パディング幅のプロパティ
パディング幅を設定するプロパティには、「padding-top（上パディング）」、「padding-bottom（下パディング）」、「padding-left（左パディング）」、「padding-right（右パディング）」およびこれら４種類のプロパティの 一括指定を行う簡略記法の「padding」がある。
padding-top、padding-bottom、padding-left、padding-rightプロパティ
「padding-topプロパティ」は上パディングの幅、「padding-bottomプロパティ」は下パディングの幅、「padding-leftプロパティ」は左パディングの幅、「padding-rightプロパティ」は右パディングの幅を指定する。 その書式は以下のとおりである。
| padding-top、padding-bottom、padding-left、padding-rightプロパティ | |
|---|---|
| 値 | <パディング幅> | inherit |
| 初期値 | 0 |
| 適用対象 | すべての要素（テーブル内部要素（行、列類）は除外する） |
| 継承 | しない |
| パーセント値 | 包含ブロックの横幅に対する割合 |
「<パディング幅>」に指定する値はつぎのとおりである。
- <長さ>
- マージン幅をemやexなどの単位付き数値で指定する。ただし、負の数値は指定できない。
- <％値>
- マージン幅を包含ブロックの横幅に対する割合で指定する。ただし、負の数値は指定できない。
paddingプロパティ
「paddingプロパティ」は上下左右のパディングの幅を一括して指定する。 その書式は以下のとおりである。
| paddingプロパティ | |
|---|---|
| 値 | <パディング幅>{1,4} | inherit |
| 初期値 | 個別のプロパティを参照する |
| 適用対象 | すべての要素（テーブル内部要素（行、列類およびセル）は除外する） |
| 継承 | しない |
| パーセント値 | 包含ブロックの横幅に対する割合 |
paddingプロパティの４つの値の指定方法は、marginプロパティと同じである。
- パッディング幅が「１つだけ指定」されている場合は、「上下左右のパディング幅」が指定された値で等しく設定される。
p { padding: 1em } - パディング幅が「２つ指定」されている場合は、最初に指定された値で「上下パディング」を、２番目に指定された値で「左右パディング」を等しく設定する。
p { padding: 1em 2em } - パディング幅が「３つ指定」されている場合は、最初に指定された値で「上パディング」を、２番目に指定された値で「左右パディング」を等しく、 ３番目に指定された値で「下パディング」を設定する。
p { padding: 1em 2em 3em } - パディング幅が「４つ指定」されている場合は、最初に指定された値で「上パディング」を、２番目に指定された値で「右パディング」を、 ３番目に指定された値で「下パディング」を、４番目に指定された値で「左パディング」をそれぞれ設定する。
p { padding: 1em 2em 3em 4em }