margin

CSS の margin プロパティは、要素の全四辺のマージン領域を設定します。これはすべての個別のマージン (margin-top, margin-right, margin-bottom, margin-left) を一度に設定する一括指定です。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

top および bottom のマージンは、 <span> または <code> などの置換要素ではないインライン要素には効果がありません。

構文セクション

/* 四辺すべてに適用 */
margin: 1em;
margin: -3px;

/* 上下 | 左右 */
margin: 5% auto;

/* 上 | 左右 | 下 */
margin: 1em auto 2em; 

/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 auto;

/* グローバル値 */
margin: inherit;
margin: initial;
margin: unset;

margin プロパティは1～4つの値を使って指定することができます。それぞれの値は <length>、 <percentage>、 または auto キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。

• 値が1つ指定された場合、全四辺に同じマージンが適用される。
• 値が2つ指定された場合、1つ目のマージンは上下、2つ目は左右の辺に適用される。
• 値が3つ指定された場合、1つ目のマージンは上、2つ目は左右、3つ目は下の辺に適用される。
• 値が4つ指定された場合、マージンはそれぞれ上、右、下、左の順（時計回り）に適用される。

値セクション

length

固定値によるマージンの寸法です。

<percentage>

内包ブロックの width に対するパーセントによるマージンの寸法です。

auto

ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。

形式文法セクション

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

例セクション

単純な例セクション

HTML

<div class="center">This element is centered.</div>

<div class="outside">This element is positioned outside of its container.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

その他の例セクション

margin: 5%;                /* 全辺: 5% のマージン */

margin: 10px;              /* 全辺: 10px のマージン */

margin: 1.6em 20px;         /* 上と下: 1.6em のマージン */
                            /* 左と右: 20px のマージン  */

margin: 10px 3% -1em;       /* 上:     10px のマージン */
                            /* 左と右: 3% のマージン   */
                            /* 下:     -1em のマージン  */

margin: 10px 3px 30px 5px;  /* 上:     10px のマージン */
                            /* 右:     3px のマージン  */
                            /* 下:     30px のマージン */
                            /* 右:     5px のマージン  */

margin: 2em auto;           /* 上と下: 2em のマージン   */
                            /* ボックスは水平方向に中央 */

margin: auto;               /* 上と下: 0 のマージン     */
                            /* ボックスは水平方向に中央 */

メモセクション

水平方向の中央揃えセクション

最近のブラウザーで何かを中央揃えしたい場合は、 display: flex; justify-content: center; を使用することができます。

しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 margin: 0 auto; を使用してください。

マージンの相殺セクション

要素の上下のマージンは、相殺されて2つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の理解を参照してください。

仕様書セクション

ブラウザーの対応セクション

関連情報セクション

• CSS 基本ボックスモデルの紹介
• マージンの相殺
• margin-top, margin-right, margin-bottom, margin-left