SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [プロパティ一覧][ボックス] [パディング]

CSS1 Reference

プロパティ

4. ボックス

ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。

4-2.パディング


4-2-1. padding-top

<length> | <percentage>
初期値
0
適用要素
全て
継承性
無し
割合指定
親要素の幅に対する割合
BLOCKQUOTE{
  padding-top    : 2%;   /*上パディングをBLOCKQUOTE要素幅の 2% 確保*/
  padding-right  : 0%;   /*右パディングをBLOCKQUOTE要素幅の 0% 確保*/
  padding-bottom : 3%;   /*下パディングをBLOCKQUOTE要素幅の 3% 確保*/
  padding-left   : 5%;   /*左パディングをBLOCKQUOTE要素幅の 5% 確保*/
}

上パディング(上ボーダーの下部分のスペース)の指定をします。 「background-color」で指定した色や 「background-image」で指定した画像などはこの領域に表示されます。

負の値は使用できません。

[Go To Top]

4-2-2. padding-right

<length> | <percentage>
初期値
0
適用要素
全て
継承性
無し
割合指定
親要素の幅に対する割合
BLOCKQUOTE{
  padding-top    : 2%;   /*上パディングをBLOCKQUOTE要素幅の 2% 確保*/
  padding-right  : 0%;   /*右パディングをBLOCKQUOTE要素幅の 0% 確保*/
  padding-bottom : 3%;   /*下パディングをBLOCKQUOTE要素幅の 3% 確保*/
  padding-left   : 5%;   /*左パディングをBLOCKQUOTE要素幅の 5% 確保*/
}

右パディング(右ボーダーの左部分のスペース)の指定をします。 「background-color」で指定した色や 「background-image」で指定した画像などはこの領域に表示されます。

負の値は使用できません。

[Go To Top]

4-2-3. padding-bottom

<length> | <percentage>
初期値
0
適用要素
全て
継承性
無し
割合指定
親要素の幅に対する割合
BLOCKQUOTE{
  padding-top    : 2%;   /*上パディングをBLOCKQUOTE要素幅の 2% 確保*/
  padding-right  : 0%;   /*右パディングをBLOCKQUOTE要素幅の 0% 確保*/
  padding-bottom : 3%;   /*下パディングをBLOCKQUOTE要素幅の 3% 確保*/
  padding-left   : 5%;   /*左パディングをBLOCKQUOTE要素幅の 5% 確保*/
}

下パディング(下ボーダーの上部分のスペース)の指定をします。 「background-color」で指定した色や 「background-image」で指定した画像などはこの領域に表示されます。

負の値は使用できません。

[Go To Top]

4-2-4. padding-left

<length> | <percentage>
初期値
0
適用要素
全て
継承性
無し
割合指定
親要素の幅に対する割合
BLOCKQUOTE{
  padding-top    : 2%;   /*上パディングをBLOCKQUOTE要素幅の 2% 確保*/
  padding-right  : 0%;   /*右パディングをBLOCKQUOTE要素幅の 0% 確保*/
  padding-bottom : 3%;   /*下パディングをBLOCKQUOTE要素幅の 3% 確保*/
  padding-left   : 5%;   /*左パディングをBLOCKQUOTE要素幅の 5% 確保*/
}

左パディング(左ボーダーの右部分のスペース)の指定をします。 「background-color」で指定した色や 「background-image」で指定した画像などはこの領域に表示されます。

負の値は使用できません。

[Go To Top]

4-2-5. padding

[ <length> | <percentage>]{1,4}
初期値
各プロパティ参照(padding-top,padding-right,padding-bottom,padding-left
適用要素
全て
継承性
無し
割合指定
親要素の幅に対する割合
BLOCKQUOTE{
  padding : 2% 0% 3% 5%;  /*上、右、下、左パディングをBLOCKQUOTE要素幅の 2% 0% 3% 5% 確保*/
}
P{
  padding : 0em 2em;      /*上下パディングをP要素のフォントサイズの 0倍*/
                          /*左右パディングをP要素のフォントサイズの 2倍*/
}

このプロパティは、padding-top , padding-right , padding-bottom , padding-left同時に指定可能です。 指定する値は1〜4個の任意で、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順(0時から時計回りと覚えると良い)で指定します。 効率良い指定が可能です。

適用パディング
AAAAA
A , BABAB
A , B , CABCA
A , B , C , DABCD
[Go To Top]

Copyright(C)1999 Miyazaki , All Rights Reserved.