マージンを指定します。
| 値 | 説明 |
|---|
| <length> | マージンを 10px, 1.5em などの長さの単位で指定します。 |
| <percentage> | マージンを 10% など、要素の大きさに対するパーセントで指定します。 |
| auto | マージンを自動計算します。 |
マージンは、下記の例で、赤いボーダーラインと周りのコンテンツとの間の隙間に相当します。赤いボーダーラインと内部のコンテンツとの間の隙間(パディング)を指定するには paddingを指定します。
周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテ
内側のコンテンツ内側のコンテンツ内側のコンテンツ内側のコンテンツ内側のコ
ンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコンテンツ周りのコ
マージンは 1～4個指定可能で、それぞれ、次のように解釈されます。
margin: 10px; /* 上側:10px、右側:10px、下側:10px、左側:10px */
margin: 10px 20px; /* 上側:10px、右側:20px、下側:10px、左側:20px */
margin: 10px 20px 30px; /* 上側:10px、右側:20px、下側:30px、左側:20px */
margin: 10px 20px 30px 40px; /* 上側:10px、右側:20px、下側:30px、左側:40px */
HTML
<h5>margin:1em</h5>
<div style="border:1px solid #999999; width:300px;">
<div>あああああああああああああああ</div>
<img src="../image/back.gif" alt="" style="margin:1em">
<div>あああああああああああああああ</div>
</div>
<h5>margin:0em</h5>
<div style="border:1px solid #999999; width:300px;">
<div>あああああああああああああああ</div>
<img src="../image/back.gif" alt="" style="margin:0em">
<div>あああああああああああああああ</div>
</div>
表示
margin:1em
あああああああああああああああ
あああああああああああああああ
margin:0em
あああああああああああああああ
あああああああああああああああ