paddingプロパティは上下左右のパディング領域(枠内余白)をまとめて指定します。パディングとは、詰め物という意味であるように内容とボーダーとの間に詰め物をしてできる枠内の余白のことを指します。背景領域の調節などに役立てることができます。
0")を参照paddingプロパティに指定できる値は、それぞれ以下の意味を示します。
em", "px" などの単位識別子を伴う数値で指定(負の値は不正)%)による割合で指定(負の値は不正)これらの値を半角スペースで区切って1つ以上4つ以下まで指定することができます。値を1つだけ記述した場合は、その指定が上下左右の四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の時計回りの順で四辺個別に反映されます。
なお、パーセンテージ値は包含ブロック(もっとも近い祖先の要素にあたるブロック要素の内容領域)の横幅を参照します。左辺(padding-left)・右辺(padding-right)のパディングだけでなく、上辺(padding-top)・下辺(padding-bottom)のパディングにおいても、参照する基準値は高さの方ではなく横幅の方であることに注意してください。
padding-toppadding-bottompadding-leftpadding-right上・下・左・右のパディング(枠内余白)を個別に指定する場合は、これら4つのプロパティが用意されています。paddingプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。
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プロパティで内容領域とボーダー(枠線)の間に詰め物をして、大きな画像がよく見えるようにデザインを調節します。
http://w3g.jp/css/box/padding直近の制作実績等:大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!