備忘録的プログラミングリファレンス

padding プロパティ

　padding プロパティは、エレメントの表示領域内の余白を指定する CSS のプロパティです。表示としては、borderより中に設定されます。
　padding-top、padding-bottom、padding-left、padding-rightプロパティを一括で指定できます。

エレメントの表示領域内に余白（Exampleを参照）
padding: 2em;

border、margin、padding

　border は、margin と padding の間に表示されます。

padding、border、marginの表示領域について
padding,border,marginの表示領域について

　詳しくは padding,border,margin プロパティを参照してください。

全体のサイズ変化に注意

　padding の幅分だけエレメントのサイズが変化することに注意が必要です。 padding の幅分だけエレメントが拡がってしまいます。例えば、エレメントの幅を「 width 値＋ padding の 幅値」として想定する必要があります。
　もしも、エレメントの width や height 値内に padding や border を収めたい場合は、box-sizing プロパティを設定します。

背景について

　背景画像についてですが、padding プロパティは内容の周りに余白を設けるものの領域のバックグランドはエレメントのものが表示されます。 エレメント全体に背景画像を表示したい場合はmarginよりpadding プロパティを使うべきです。

padding プロパティの設定方法

　値の設定数によって上下左右の余白の量を設定できます。

指定数と設定
値を1つ上下左右で同じ値
値を2つ上下、左右
値を3つ上、左右、下の設定
値を4つ上、右、下、左の設定
表示領域内に上に１文字分、左右に1.5文字、下に2文字の空白を設ける
padding: 1em 1.5em 2em;

ページ内 Index

構文(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-lengthCSS長さの単位
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）0
継承（Inherited）No
CSS AnimationYes

Example

　paddingの例です。灰色の部分がpaddingです。内容の周りに設ける空白として表示されます。

　内容はpaddingの中に表示されますが、backgroundによる背景はpadding、borderまでが表示範囲です。