パディング - wicky @ ウィキ

パディング

　要素の内容とボーダとの余白のことを「パディング」と呼ぶ。たとえば、内容のまわりを線で囲むような場合、適当な余白を取ることで格段に見やすくなる。

　※背景には、要素に対する設定が適用される。

　設定の方法はマージンと同じで、上下左右をそれぞれ指定できるほか、paddingプロパティによって上下左右のパディングをまとめて指定することができる。プロパティの値には、長さやパーセンテージ（親要素のボックスの内容を100％として計算）を指定する。

■パディングのプロパティ

プロパティ	概要
padding-top	上パディング
padding-right	右パディング
padding-bottom	下パディング
padding-left	左パディング

以下に、p要素に上下パディングを設定する例を示す。わかりやすいように、枠線で囲む。

●パディングの設定例(em → 適用要素のfont-sizeを１としたその倍率)

p {
    border-style : solid;
    border-color : green;
    padding-top : 1em;
    padding-bottom : 1em;
    padding-right : 2em;
    padding-left : 2em;
}

　paddingプロパティで、上下左右のパディングをまとめて指定することができる。

　※複数の値を指定する場合は、区切り文字として、カンマ「,」または空白を指定することができる。

■paddingプロパティの値

値の数	値の内容
１	上下左右
２	上下、左右
３	上、左右、下
４	上、右、下、左（ボックスの上から時計回りに指定）

　以下にプロパティの設定例を示す。

●上下左右のパディングを1emに指定

p { padding : 1em }

●上下のパディングを1emに、左右のパディングを2emに指定

p { padding : 1em 2em }

　※パディングは子要素に継承されない。親要素のパディングを継承したい場合は、次のように「inherit」を設定する。