margin

概要

margin CSSプロパティは、四方全ての余白を設定します。margin プロパティは、単一方向の margin を設定するプロパティ ( margin-top / margin-right / margin-bottom / margin-left ) を同時に全方向に対して指定する為のショートハンド・プロパティです。
負の値を指定する事も出来ます。

構文

[ <length> | <percentage> | auto ]{1,4}

値

次に示す値を 1 ～ 4 つ指定してください。指定数によって指定方向が変化します。

<length>

固定幅を指定します。負の値が許可されています。使用可能な単位は <length> を参照してください。

<percentage>

<percentage>は常に包含ブロックの幅を基準にします。負の値が許可されています。

auto

auto は適切な値置き換えられます。例えば、ブロックを中央寄せに使用できます。
div { width:50%;  margin:0 auto; } は div 要素を水平方向で中央寄せします。

• 値が 1 つだけの場合、四方全てに同じ値が適用されます。
• 値が 2 つの場合、1 つ目は上下、2 つ目は左右に適用されます。
• 値が 3 つの場合、1 つ目は上、2 つ目は左右、3 つ目は下に適用されます。
• 値が 4 つの場合、それぞれ 上、右、下、左の順番（時計回り）に適用されます。

例

.targetElm { margin: 5%; }					/* 四方全てに 5% の余白 */

.targetElm { margin: 10px; }				/* 四方全てに 10px の余白 */

.targetElm { margin: 1.6em 20px; }			/* 上下に 1.6em、左右に 20px の余白 */

.targetElm { margin: 10px 3% 1em; }			/* 上に 10px、左右に 3%、下に 1em の余白 */

.targetElm { margin: 10px 3px 30px 5px; }	/* 上に 10px、右に 3px、下に 30px、左に 5px の余白 */

.targetElm { margin: 1em auto; }			/* 上下に 1em 余白、ボックスを水平方向で中央寄せ */

.targetElm { margin: auto; }				/* ボックスを水平方向で中央寄せ、上下の余白は 0  */

margin:     auto;
background: gold;
width:      66%;

margin:     -1em 0 100px -40px;
background: plum;
width:      20em

仕様

ブラウザ実装状況

関連情報

• マージンの相殺