マージンプロパティ
アセンブラの魔女 ⧫ CSS ⧫ ボックス・モデル ⧫ マージンプロパティ

　マージンプロパティは、ボックスのマージン領域の幅を指定します。

　marginショートハンドプロパティは上, 右, 下, 左の4つの辺のマージンを設定し、他のマージンプロパティは1つの辺のみを設定します。

　これらのプロパティはすべての要素に適用されますが、垂直マージンは置き換えられないインライン要素（non-replaced inline elements）には影響しません。

　マージンプロパティでは、<margin-width>型を使ってマージンを指定します。この型は次のいずれかの値となります。

<length>固定値でマージン幅を指定
<percentage>ボックスの包含ブロックの幅に対するパーセンテージでマージン幅を指定（margin-topとmargin-bottomの場合も同じ）。包含ブロックの幅がこの要素に依存する場合の結果はCSS 2.1で定義されていません
autoマージン幅を自動計算。詳細は幅とマージンの計算をご覧ください

　マージンプロパティに負の値を指定することもできますが、実装固有の制限が存在する場合があります。

　margin-topプロパティはトップマージンの幅、margin-bottomプロパティはボトムマージンの幅を指定します。

値<margin-width> | inherit
初期値0
適用可能な要素able-caption, table, inline-table以外の表形式の要素を以外のすべての要素
継承のデフォルト動作継承しない
パーセンテージ値収容ブロックの幅に対するパーセンテージ値
メディアグループvisual
計算値指定されたパーセンテージ値、または絶対値

　これらのプロパティは、置き換えられないインライン要素（non-replaced inline element）には影響しません。

　margin-rightプロパティはライトマージンの幅、margin-leftプロパティはレフトマージンの幅を指定します。

値<margin-width> | inherit
初期値0
適用可能な要素able-caption, table, inline-table以外の表形式の要素を以外のすべての要素
継承のデフォルト動作継承しない
パーセンテージ値収容ブロックの幅に対するパーセンテージ値
メディアグループvisual
計算値指定されたパーセンテージ値、または絶対値

　marginはmargin-top, margin-right, margin-bottom, margin-leftのためのショートハンドプロパティです。

値<margin-width>{1,4} | inherit
初期値0
適用可能な要素able-caption, table, inline-table以外の表形式の要素を以外のすべての要素
継承のデフォルト動作継承しない
パーセンテージ値収容ブロックの幅に対するパーセンテージ値
メディアグループvisual
計算値指定されたパーセンテージ値、または絶対値

　1～4個の値を指定できますが、その意味は値の数によって異なります。

　以下は1～4個の値がどのマージン領域に適応されるかを示す表です。値1はリストの先頭の値を意味します。

値の数値1値2値3値4
1トップ
ライト
ボトム
レフト		---
2トップ
ライト
ボトム		ライト
レフト		--
3トップライト
レフト		ボトム-
4トップライトボトムレフト 

body { margin: 2em }         /* 全てのマージン領域の幅を 2em に指定 */
body { margin: 1em 2em }     /* トップとボトムを 1em、ライトとレフトを 2em に指定     */
body { margin: 1em 2em 3em } /* トップ=1em、ライト=2em、ボトム=3em、レフト=2em に指定 */

　上記の3行目は、ショートハンドプロパティを使わずに（個別のプロパティを使って）以下のように書くこともできます。

body {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;
}
▼ Property