margin

Updated 2013.11.08 / Published 2007.02.02

marginプロパティはボックスの上下左右のマージン領域（他の要素と見分けをつけるための最も外側にある余白）をまとめて設定するショートハンド（CSSにおいて値を簡略化できる記法のこと）です。

マージン領域とは、たとえば、わかりやすい例に視覚環境の UA のデフォルトスタイルシートでは、blockquote要素, form要素, h1-h6要素, p要素などのブロックレベル要素の上下（blockquote要素の場合は上下左右）に設定されている透明の（親要素の背景が透ける）余白部分のことです。これらの要素にデフォルトで設けられているマージンをなくしたり、さらに広げたりするのも、marginプロパティによって操作できます。

値

初期値

0

適用対象

すべての要素（表の行・行グループ・列・列グループ・セル要素を除く）

継承

しない

メディア

visual

marginプロパティの値

marginプロパティに指定できる値は、それぞれ以下の意味を示します。

<長さ>: "em", "px" などの単位識別子を伴う数値で指定
<パーセンテージ>: 包含ブロックの横幅を基準とするパーセンテージ（%）による割合で指定（上・下辺のマージンも横幅を参照）
auto: UA のレンダリング（描写）に依存（auto と各プロパティの兼ね合いを参照）

これらの値を半角スペースで区切って1つ以上4つ以下まで指定することができます。値を1つだけ記述した場合は、その指定が上下左右の四辺全部に反映され、2つの場合は「上下」「左右」の順に反映され、3つで「上」「左右」「下」の順に反映され、4つで「上」「右」「下」「左」の時計回りの順で四辺個別に反映されます。

なお、パーセンテージ値は包含ブロック（もっとも近い祖先の要素にあたるブロックボックスを形成する要素の内容領域）の横幅を参照します。左辺（margin-left）・右辺（margin-right）のマージンだけでなく、上辺（margin-top）・下辺（margin-bottom）のマージンにおいても、参照する基準値は高さの方ではなく横幅の方であることに注意してください。

auto と各プロパティの兼ね合い

"auto" を指定した場合、要素の内容領域の横幅を指定する widthプロパティ、要素の位置を指定する topプロパティ, bottomプロパティ, leftプロパティ, rightプロパティとの兼ね合いでマージンが算出されることになります。なお、この内容の解釈はとても複雑なので、ここではあえて簡単な説明だけに留めておきます(詳しく知りたいという方はCSS2.1の視覚整形モデル詳細を参照ください)。

まず、適用対象がインラインボックスを形成する要素や floatプロパティによる左右どちらかへのフロート（浮動化）を指定された要素である場合、"auto" の指定は常に "0" の値を算出します。

そして、最低限抑えておきたい点として、leftプロパティと rightプロパティの値が "auto" で、widthプロパティの値が "auto" 以外で横幅が指定されたブロックボックスを形成する要素を対象とする場合は、次のようなマージンが算出されることになります。

左辺と右辺の両マージンに対して "auto" の値が指定されている（"margin-left : auto ; margin-right : auto ;" など）場合、widthプロパティで横幅の指定されたブロックボックスを形成する要素のボックスを中央揃え（センタリング）にするような左右に等分のマージンを算出します。
左辺・右辺のどちらか一方のマージンの値が "0" で、もう一方に "auto" の値が指定されている（"margin-left : auto ; margin-right : 0 ;"、または "margin-left : 0 ; margin-right : auto ;" など）場合、widthプロパティで横幅の指定されたブロックボックスを形成する要素のボックスを左揃え（右辺が "auto" の場合）・右揃え（左辺が "auto" の場合）にするようなマージンを算出します。

マージンの相殺

マージンの相殺の身近な例を挙げます。段落を作成するための p要素は、視覚環境の UA のデフォルトスタイルシートでは上下に1行分のマージンが設けられています。この上下に1行分のマージンをもつ p要素がソース内にて連続した場合に、上にある p要素が下辺に1行分のマージンを作り、続く下にある p要素も上辺に1行分のマージンを作るはずですが、これらの p要素が隣り合っている部分には計2行分のマージンができるわけではなく、1行分のマージンしかできません。これがマージンの相殺（collapsing margins）です。

floatプロパティによる左右どちらかへのフロート（浮動化）、及び positionプロパティによる絶対配置（"absolute"、または "fixed"）が指定されていないブロックボックスを形成する要素が隣り合った場合に限り、垂直（上下）方向のマージンは相殺されることになります。垂直方向のマージンの相殺は、指定された値により、最終的なマージンの算出方法が次の3パターンに別れます。

正の値のマージンが隣り合った場合、指定された正の値が大きな方のマージンを採用する。
正の値と負の値のマージンが隣り合った場合、両方の値を足しあわせた値を採用する。
負の値のマージンが隣り合った場合、指定された負の値が大きな方のマージンを採用する。

<p style="margin : 5px 5px 30px 5px ;">上の段落</p>
<p style="margin : -20px 5px 5px 5px ;">下の段落</p>

たとえば、このサンプルの場合であれば、上の段落は下辺に "30px" のマージンが指定されており、下の段落は上辺に "-20px" のマージンが指定されているので、2番目のパターンの正の値と負の値のマージンが隣り合った場合にあてはまり、最終的なマージンの算出は、両方の値を足しあわせた "30px + (-20px) = 10px" となります。

なお、水平方向のマージンの相殺は行われません。各マージンの両方の値を足しあわせた値がマージンとして反映されます。

上・下・左・右のマージンを個別指定

margin-top

上辺のマージン（余白）を指定する

margin-bottom

下辺のマージン（余白）を指定する

margin-left

左辺のマージン（余白）を指定する

margin-right

右辺のマージン（余白）を指定する

上・下・左・右のマージン（余白）を個別に指定する場合は、これら4つのプロパティが用意されています。marginプロパティと違うのは値を1つしか指定できないことだけで、その他は同じなので、これらの個別プロパティについての解説は割愛します。

marginプロパティの実装状況

IE: ◯：IE6の後方互換モードでは左・右辺に指定された "auto" の値が算出するマージンは常に "0" になる
Firefox: ◯
Opera: ◯
Chrome: ◯
Safari: ◯
iOS: ◯
Android: ◯

margin-topプロパティ, margin-bottomプロパティ, margin-leftプロパティ, margin-rightプロパティも同上。

サンプル

<table style="margin-left : auto ; margin-right : auto ;" border="1"><tr><td>
横幅の指定されたブロックボックスを形成する要素のセンタリング
</td></tr></table>
<table style="margin-left : auto ; margin-right : 0 ;" border="1"><tr><td>
横幅の指定されたブロックボックスを形成する要素の右寄せ
</td></tr></table>

サンプルのように marginプロパティは、横幅の指定されたブロックボックスを形成する要素の左右中央揃えに応用することができます。詳しくは CSS によるブロックレベル要素の左右中央揃えを参照ください。