【margin】マージンの一括指定

各marginの位置(ボックスの構造)

marginプロパティでは、上下左右のマージンを一括で(まとめて)指定することができます。 また値を1つだけ指定すると上下左右に同じマージンの幅が適用されますが、上下左右それぞれ違う幅にしたい場合は、値を半角スペースで区切って複数指定します(負の値も指定できます)。

  • 値が1つの場合……「上下左右」
  • 値が2つの場合……「上下」「左右」
  • 値が3つの場合……「上」「左右」「下」
  • 値が4つの場合……「上」「右」「下」「左」

なお上下に隣接するブロックレベル要素同士のマージンは、相殺され値が大きい方が適用されます。 この場合は次のようなルールに沿った表示となります。

  • どちらも正の値の場合は、大きい方の値が設定される
  • 正と負の値の場合は、両方を足した値が設定される
  • どちらも負の値の場合は、小さい方の値が設定される

マージンの相殺が起きるのは上下のみとなりますので、左右のマージンは相殺されません。 またマージンの部分は常に透明となりますので、色を設定する事はできません。

なおブラウザの表示領域には、初期の状態でマージンが設定されています(例えばInternet Explorer9であれば、上下左右に8pxのマージンが設定されている)。 ですので要素の配置する位置を計算したい時などは、margin:0;をbody要素などに指定して下さい。

書式

  • margin : ……… 各マージンをまとめて指定

★:数値、パーセント、auto、inherit

実数値+単位
数値にpxなどの単位を付けてマージンを指定します。
パーセント値+%
マージンを、包含ブロックの幅に対する割合で指定します。上下のマージンであっても、高さに対する割合とはなりませんので、気を付けて下さい。(ページボックスの場合は、上下のマージンはページボックスの高さに対しての割合となる)
auto
状況に応じてマージンが自動で調整されます。インライン要素の上下左右、ブロックレベル要素の上下のマージンは「0」が設定されます。なおブロックレベル要素の左右のマージンを「auto」に設定すると、どちらも同じ値となるため、そのボックスがセンタリング(中央表示)されます。

使用した時の例

.sample1 {margin:10px;}
.sample2 {margin:10px 20px;}
.sample3 {margin:10px 20px 30px;}
.sample4 {margin:10px 20px 30px 40px;}

div{background:#DFF2FF;}
<div class="sample1">margin:10px (上下左右10px)</div>
<div class="sample2">margin:10px 20px (上下10px、左右20px)</div>
<div class="sample3">margin:10px 20px 30px (上10px、左右20px、下30px)</div>
<div class="sample4">margin:10px 20px 30px 40px; (上10px、右20px、下30px、左40px)</div>

ブラウザ上の表示例

margin:10px (上下左右10px)
margin:10px 20px (上下10px、左右20px)
margin:10px 20px 30px (上10px、左右20px、下30px)
margin:10px 20px 30px 40px; (上10px、右20px、下30px、左40px)

対応ブラウザなどのデータ

初期値 個々のプロパティを参照 値の継承 継承しない
適用可能な要素 すべての要素(tr,th,td,thead,tbody,tfoot,col,colgroupを除く)
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報