padding

padding

プロパティの簡単な説明

要素のpadding領域の幅を指定する簡略化プロパティpadding領域についてはボックスの概念?(未稿)を参照。

以下のように、上下左右各paddingの値を空白文字類で区切って指定する。

/*H1要素の上下左右に10pxのパディング*/
H1 { padding: 10px; }

/*H2要素の上下に10px、左右に5pxのパディング*/
H2 { padding: 10px 5px; }

/*H3要素の上に10px、左右に15px、下に20pxのパディング*/
H3 { padding: 10px 15px 20px; } 

/*H4要素の上に10px、右に15px、下に20px、左に25pxのパディング*/
H4 { padding: 10px 15px 20px 25px; } 
  1. 値が1つの場合は上下左右を一度に指定する(上記H1の例)。
  2. 値が2つの場合は上下と左右をそれぞれ一度に指定する(上記H2の例)。
  3. 値が3つの場合は順に上、左右、下と対応する(上記H3の例)。
  4. 値が4つの場合は時計回りに上、右、下、左と対応する(上記H4の例)。

この指定方法のルールは、bordermarginといった簡略化プロパティと共通である。

指定出来る値

値は数値、%値をとれる。

%値は親要素の幅を基準に算出され、この値は上下パディング領域に対しても同様に適用される。

ただしmarginと異なり、値に負の値を使用することは出来ない。

また、このプロパティは簡略化プロパティであるので、初期値を持たない。

marginとの違い

margin領域がボーダーの外側であるのに対し、padding領域はボーダーの内側に確保される内容領域とボーダーとの間隔であり、margin領域のように隣接する要素間での値の相殺が行われない。

f:id:kamioka:20050703101928:image

また、padding領域の背景色及び背景画像には、その要素に対するbackgroundプロパティによる指定が適用される。

* はてなダイアリーキーワード:padding

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。