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

paddingプロパティ

 paddingプロパティは、エレメントの表示領域内に設定される余白を定義するプロパティです。borderより中に設定されます。 padding-toppadding-bottompadding-leftpadding-rightプロパティを一括で指定できます。

 paddingプロパティは、「width値+padding値」分だけボックスの領域が確保されます。しかし、内容が表示できる領域は「width値」分だけです。 気をつけなければならないことは、「width値+padding値」分だけ親要素が拡がってしまいます。そのために「width値+padding値」が親要素より小さくする必要があります。
 もし親の領域内にpaddingやborderを収めたい場合は、box-sizingプロパティによって親の領域に収めることができます。その分だけ内容の領域はより小さくなります。

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

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

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

構文(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