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

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

メモ: マージンは要素の周りに追加の領域を作成します。それに対して、 padding は要素に追加の領域を作成します。

構文

/* 四辺すべてに適用 */
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 Basic Box Model
margin の定義
草案 有意な変更なし。
CSS Transitions
margin の定義
草案 margin をアニメーション可能として定義。
CSS Level 2 (Revision 1)
margin の定義
勧告 インライン要素における top および bottom マージンの効果を削除。
CSS Level 1
margin の定義
勧告 初回定義

初期値一括指定の各プロパティとして
適用対象table-caption, table, inline-table 以外の表の display 種別を除くすべての要素。。 ::first-letter にも適用されます。
継承なし
パーセンテージ包含ブロックの幅
メディア視覚
計算値一括指定の各プロパティとして
  • margin-bottom: 指定されたパーセンテージ値または絶対的な長さ
  • margin-left: 指定されたパーセンテージ値または絶対的な長さ
  • margin-right: 指定されたパーセンテージ値または絶対的な長さ
  • margin-top: 指定されたパーセンテージ値または絶対的な長さ
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 3Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 6Safari iOS 完全対応 1Samsung Internet Android 完全対応 あり
autoChrome 完全対応 1Edge ? Firefox 完全対応 1IE 完全対応 6
補足
完全対応 6
補足
補足 The auto value is not supported in quirks mode.
Opera 完全対応 3.5Safari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

ドキュメントのタグと貢献者

最終更新者: mfuji09,