ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。
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」で指定した画像などはこの領域に表示されます。
負の値は使用できません。
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」で指定した画像などはこの領域に表示されます。
負の値は使用できません。
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」で指定した画像などはこの領域に表示されます。
負の値は使用できません。
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」で指定した画像などはこの領域に表示されます。
負の値は使用できません。
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時から時計回りと覚えると良い)で指定します。 効率良い指定が可能です。
値 | 適用パディング | |||
上 | 右 | 下 | 左 | |
A | A | A | A | A |
A , B | A | B | A | B |
A , B , C | A | B | C | A |
A , B , C , D | A | B | C | D |