ホーム >>> HTML整理ノート

margin外部余白の一括設定

書式 ＜margin:（スペースで区切った値)＞
・1個の値を設定した場合･･･上下左右が同じマージンに
・2個の値を設定した場合･･･１つ目の値が上下マージン，２つ目が左右マージンに。
・3個の値を設定した場合･･･１つ目が上マージン，２つ目が左右マージン，３つ目が
下マージンに。
・4個の値を設定した場合･･･１つ目から順に上，右，下，左のマージンに

Sample

(1)marginを設定していない

子要素

(2)marginを一括設定＜style="margin:5mm"＞した場合（1つの値）)

子要素

(3)marginを一括設定＜style="margin:5mm 30%"＞した場合（2つの値）

子要素

(4)marginを一括設定＜style="margin:5mm 30% 2mm"＞した場合（3つの値）

子要素

(5)marginを一括設定＜style="margin:1mm 30mm 5mm 10mm"＞した場合（4つの値）

子要素

(6)marginを一括設定＜style="margin:auto"＞にすると

子要素

(7)marginを一括設定＜style="margin:0"＞にすると

子要素

IE8とFireFox3.6.13での表示を比較すると、全く同じなのは(5)(7)だけ。左右marginの取り方は同じになるが、上下marginの解釈が全く異なる。また ＜auto＞では上下左右の全てが異なる。GooleChromeバージョン22ではFireFoxと同じだった（ということはIE8が特異(得意）な解釈？）。

Sample Source......................................................................>>>

<style type="text/css">
 .oya {width:80mm;height:10mm;background-color:#c0c0c0;border:1px solid navy} 
</style>

<p class="sample">(1)marginを設定していない</p> 
<div class="oya">
<p style="background-color:floralwhite;border:1px solid red">子要素</p>
</div>
<p class="sample">(2)marginを一括設定＜style="margin:5mm"＞した場合（1つの値）)</p> 
<div class="oya">
<p style="margin:5mm;background-color:floralwhite;border:1px solid red">子要素</p>
</div>
<p class="sample">(3)marginを一括設定＜style="margin:5mm 30%"＞した場合（2つの値）</p> 
<div class="oya">
<p style="margin:5mm 30%;background-color:floralwhite;border:1px solid red">子要素</p>
</div>
<p class="sample">(4)marginを一括設定＜style="margin:5mm 30% 2mm"＞した場合（3つの値）</p> 
<div class="oya">
<p style="margin:5mm 30% 2mm;background-color:floralwhite;border:1px solid red">子要素</p>
</div>
<p class="sample">(5)marginを一括設定＜style="margin:1mm 30mm 5mm 10mm"＞
　　　　　　　した場合（4つの値）</p> 
<div class="oya">
<p style="margin:1mm 30mm 5mm 10mm;background-color:floralwhite;border:1px solid red">
　　　　　　　子要素</p>
</div>
<p class="sample">(6)marginを一括設定＜style="margin:auto"＞にすると</p> 
<div class="oya">
<p style="width:50mm;margin:auto;background-color:floralwhite;border:1px solid red">
　　　　　　　子要素</p>
</div>
<p class="sample">(7)marginを一括設定＜style="margin:0"＞にすると</p> 
<div class="oya">
<p style="width:50mm;margin:0;background-color:floralwhite;border:1px solid red">
　　　　　　　子要素</p>
</div>