ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。
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 を同時に指定可能です。 指定する値は１〜４個の任意で、指定した数により下表のように適用されます。 ただし、基本的に「上」「右」「下」「左」の順 （０時から時計回りと覚えると良い）で指定します。 効率良い指定が可能です。
| 値 | 適用マージン | |||
| 上 | 右 | 下 | 左 | |
| 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 |