ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。
BODY{ margin-top : 1%; /*上マージンを表示領域幅の 1% 確保*/ margin-right : 7%; /*右マージンを表示領域幅の 7% 確保*/ margin-bottom : 3%; /*下マージンを表示領域幅の 3% 確保*/ margin-left : 5%; /*左マージンを表示領域幅の 5% 確保*/ }
上マージン(上ボーダーの上部分のスペース)の指定をします。 負の値も使用可能ですが、ブラウザにより処理が異なる可能性があります。
このプロパティを指定した要素の上の要素の下マージンと相殺を起こし、 何れか大きい方のマージンがその両要素のマージンとなります。
BODY{ margin-top : 1%; /*上マージンを表示領域幅の 1% 確保*/ margin-right : 7%; /*右マージンを表示領域幅の 7% 確保*/ margin-bottom : 3%; /*下マージンを表示領域幅の 3% 確保*/ margin-left : 5%; /*左マージンを表示領域幅の 5% 確保*/ }
右マージン(右ボーダーの右部分のスペース)の指定をします。 負の値も使用可能ですが、ブラウザにより処理が異なる可能性があります。
BODY{ margin-top : 1%; /*上マージンを表示領域幅の 1% 確保*/ margin-right : 7%; /*右マージンを表示領域幅の 7% 確保*/ margin-bottom : 3%; /*下マージンを表示領域幅の 3% 確保*/ margin-left : 5%; /*左マージンを表示領域幅の 5% 確保*/ }
下マージン(ボーダーの下部分のスペース)の指定をします。 負の値も使用可能ですが、ブラウザにより処理が異なる可能性があります。
このプロパティを指定した要素の下の要素の上マージンと相殺を起こし、 何れか大きい方のマージンがその両要素のマージンとなります。
BODY{ margin-top : 1%; /*上マージンを表示領域幅の 1% 確保*/ margin-right : 7%; /*右マージンを表示領域幅の 7% 確保*/ margin-bottom : 3%; /*下マージンを表示領域幅の 3% 確保*/ margin-left : 5%; /*左マージンを表示領域幅の 5% 確保*/ }
左マージン(ボーダーの左部分のスペース)の指定をします。 負の値も使用可能ですが、ブラウザにより処理が異なる可能性があります。
このプロパティを指定した要素の上の要素の下マージンと相殺を起こし、 何れか大きい方のマージンがその両要素のマージンとなります。
BODY{ margin : 1% 7% 3% 5%; /*上、右、下、左マージンをそれぞれ表示領域幅の 1% 7% 3% 5% に指定*/ } P{ margin : 0em 2em; /*上下マージンをP要素のフォントサイズの 0倍*/ /*左右マージンをP要素のフォントサイズの 2倍*/ }
このプロパティは、margin-top , margin-right , margin-bottom , margin-left を同時に指定可能です。 指定する値は1〜4個の任意で、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順 (0時から時計回りと覚えると良い)で指定します。 効率良い指定が可能です。
値 | 適用マージン | |||
上 | 右 | 下 | 左 | |
A | A | A | A | A |
A , B | A | B | A | B |
A , B , C | A | B | C | B |
A , B , C , D | A | B | C | D |