パディング

説明

padding: top right bottom left; C1- ie4- N4-

padding-top: top; C1- ie4- N4-

padding-right: right; C1- ie4- N4-

padding-bottom: bottom; C1- ie4- N4-

padding-left: left; C1- ie4- N4-

値:	[ <長さ> \| <%値> ] \| inherit

初期値：0、適用要素：すべて(ただし、tr、thead、tfoot、tbody、col、colgroup要素は除く)、継承：しない、%値：包含ブロックを参照、メディア：ビジュアル

パディングのプロパティは、ボックスのパディング幅を指定します。簡略化プロパティ「padding」は、四辺のパディング幅を半角スペース[ ]区切りの値で同時に指定できます。その他のプロパティは各辺のパディング幅を指定します。

パディングに負の値を指定することはできません。

簡略化プロパティ「padding」について

簡略化プロパティ「padding」は、値が1つのとき上右下左のパディングに適用されます。値が2つのとき、1つ目が上下、2つ目が右左のパディングに適用されます。値が3つのとき、1つ目が上、2つ目が右左、3つ目が下のパディングに適用されます。値が4つのとき上から時計回りに上、右、下、左のパディングに適用されます。

すなわち、値は上から時計回りに適用され、空白の値は、反対側の値によって補われます。

使用例


h1 {padding:1em 2em}

blockquote {padding-top:0.5em; padding-bottom:0.5em}

パディングの値 <padding-width>

長さ	C1- ie4- N4- パディング幅を指定。
%値	C1- ie4- N4- 上位要素の包含ブロックの横幅に対する割合で指定します。上下のパディングについても横幅を参照することに注意してください。

パディングに1つの値

パディングに1つ以上の値

パディング、上、右、下、左

コンテンツをウィンドウの表示領域全体にぴったりと表示させたい場合

一般的なブラウザでは、body要素に「8px」程度のマージンが設定され、パディングは「0」に指定されています。しかしながら、Opera6では、逆にマージンが「0」に設定され、パディングがある程度設定されています。そのため、Opera6においてもbody要素のコンテンツをウィンドウの表示領域全体にぴったりと表示させたい場合などには、マージンだけでなくパディングも「0」に指定しておく必要があります。


body {

  margin:0;

  padding:0;  /* for opera6 */

}

*1 現行のOpera9では改善されています(2007/01/10)。

パディング (Padding properties)