margin外部余白を上下左右個別に設定
marginスタイルはブロック要素外部の上下左右のマージン(余白)をつくる。
margin-top:(値) ･･･上のマージン
margin-right:(値) ･･･右のマージン
margin-bottom:(値) ･･･下のマージン
margin-left:(値) ･･･左のマージン
（値）
・pt、px、in、em、cm、mm単位で値を指定。マイナス(-)値を設定可。
・%指定･･･親要素の幅に対しての％で指定（上下marginも幅に対しての%になる)
・＜auto＞指定･･･領域サイズの幅や高さによって自動計算される。
Sample1-親の中に子要素1個だけの場合
下はmarginを設定していない
子要素1
下は子要素に＜margin-top:2mm;margin-right:20mm;margin-bottom:0;margin-left:10mm＞を設定
子要素1
下は子要素に%設定＜margin-top:5%;margin-right:40%;margin-bottom:50%;margin-left:5%＞した場合
*上下marginも親要素の横幅に対しての%になる
子要素1
下は子要素にマイナス(-)設定＜margin-top:-1mm;margin-right:-20mm;margin-bottom:0;margin-left:-3mm＞した場合
子要素1
*IE8ではマイナス(-)設定すると親要素からはみ出すが、はみ出た部分は表示されない。FireFox／GoogleChromeは、はみ出た部分も表示する。
Sample2-親の中に子要素が複数の場合
下はmarginを設定していない
子要素
子要素target
子要素
下は子要素にmarginを設定
子要素
子要素target
子要素
左右marginは親要素に基づき計算されるので分るが、上下marginはよく分らん？？。いろいろテストしてみると、上の子要素のmargin-bottomと下の子要素のmargin-topを比較し、大きいほうが適用されているようだ。（プラウザによっては解釈が違うのかナ？）
Sample Source......................................................................>>>
<style type="text/css">
.oya1 {width:80mm;height:10mm;background-color:#c0c0c0;border:1px solid navy}
.oya2 {width:80mm;height:25mm;background-color:#c0c0c0;border:1px solid navy}
</style>
<h5>Sample1-親の中に子要素1個だけの場合</h5>
<div class="oya1"><p style="background-color:floralwhite;border:1px solid red">
子要素1</p></div>
<div class="oya1"><p style="margin-top:2mm;margin-right:20mm;margin-bottom:0;
margin-left:10mm;background-color:floralwhite;border:1px solid red">
子要素1</p></div>
<div class="oya1"><p style="margin-top:5%;margin-right:40%;margin-bottom:50%;
margin-left:5%;background-color:floralwhite;border:1px solid red">
子要素1</p></div>
<div class="oya1"><p style="margin-top:-1mm;margin-right:-20mm;margin-bottom:0;
margin-left:-3mm;background-color:floralwhite;border:1px solid red">
子要素1</p></div>
<h5>Sample2-親の中に子要素が複数の場合</h5>
<div class="oya2"><p style="border:1px solid red">子要素</p>
<p style="background-color:floralwhite;border:1px solid red">子要素target</p>
<p style="border:1px solid red">子要素</p>
</div>
<div class="oya2"><p style="margin-top:1mm;margin-right:10mm;margin-bottom:1mm;
margin-left:5mm;border:1px solid red">子要素</p>
<p style="margin-top:2mm;margin-right:5mm;margin-bottom:8mm;margin-left:8mm;
background-color:floralwhite;border:1px solid red">子要素target</p>
<p style="margin-top:9mm;margin-right:10mm;margin-bottom:1mm;margin-left:5mm;
border:1px solid red">子要素</p>
</div>