padding
Updated / Published
paddingプロパティは上下左右のパディング領域（枠内余白）をまとめて設定するショートハンド（CSSにおいて値を簡略化できる記法のこと）です。パディングとは、詰め物という意味であるように内容とボーダーとの間に詰め物をしてできる枠内の余白のことを指します。背景領域の調節などに役立てることができます。
- 値
- 初期値
0- 適用対象
- すべての要素（表の行・行グループ・列・列グループ・セル要素を除く）
- 継承
- しない
- メディア
- visual
paddingプロパティの値
paddingプロパティに指定できる値は、それぞれ以下の意味を示します。
これらの値を半角スペースで区切って1つ以上4つ以下まで指定することができます。値を1つだけ記述した場合は、その指定が上下左右の四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の時計回りの順で四辺個別に反映されます。
なお、パーセンテージ値は包含ブロック（もっとも近い祖先の要素にあたるブロックボックスを形成する要素の内容領域）の横幅を参照します。左辺（padding-left）・右辺（padding-right）のパディングだけでなく、上辺（padding-top）・下辺（padding-bottom）のパディングにおいても、参照する基準値は高さの方ではなく横幅の方であることに注意してください。
上・下・左・右のパディングを個別指定
padding-top- 上辺のパディング（枠内余白）を指定する
padding-bottom- 下辺のパディング（枠内余白）を指定する
padding-left- 左辺のパディング（枠内余白）を指定する
padding-right- 右辺のパディング（枠内余白）を指定する
上・下・左・右のパディング（枠内余白）を個別に指定する場合は、これら4つのプロパティが用意されています。paddingプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。
paddingプロパティの実装状況
- IE
- ◯
- Firefox
- ◯
- Opera
- ◯
- Chrome
- ◯
- Safari
- ◯
- iOS
- ◯
- Android
- ◯
padding-topプロパティ, padding-bottomプロパティ, padding-leftプロパティ, padding-rightプロパティも同上。
サンプル
h2 {
font : italic bold 200%/1 'Georgia',serif ;
border : 1px solid navy ;
color : navy ;
padding : 50px 0 50px 250px ;
background : transparent url(image.gif) no-repeat left bottom ;
}このサンプルのように paddingプロパティは、よく背景領域を調節するために用いられます。通常、背景領域は、ボックス内の border（ボーダー）の領域まで（内容領域+パディング+ボーダー）のため、背景に大きな画像を使いたい場合には、paddingプロパティで内容領域とボーダー（枠線）の間に詰め物をして、背景に敷いた画像の全体が見えるようにデザインを調節します。