--- title: margin slug: Web/CSS/margin tags: - CSS - CSS プロパティ - CSS 基本ボックスモデル - Reference translation_of: Web/CSS/margin translation_of_original: Web/CSS/margin-new ---
{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/margin.html")}}

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

注: マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("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 キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。

値

{{cssxref("length")}}
固定値によるマージンの寸法です。
{{cssxref("percentage")}}
内包ブロックの width に対するパーセントによるマージンの寸法です。
auto
ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。

形式文法

{{csssyntax}}

例

単純な例

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%;
}

{{ EmbedLiveSample('Simple_example','100%',120) }}

その他の例

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つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の理解を参照してください。

仕様書

仕様書 状態 備考
{{ SpecName('CSS3 Box', '#margin', 'margin') }} {{ Spec2('CSS3 Box') }} 有意な変更なし。
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }} {{ Spec2('CSS3 Transitions') }} margin をアニメーション可能として定義。
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }} {{ Spec2('CSS2.1') }} インライン要素における top および bottom マージンの効果を削除。
{{ SpecName('CSS1', '#margin', 'margin') }} {{ Spec2('CSS1') }} 初回定義

{{cssinfo}}

ブラウザーの互換性

{{Compat("css.properties.margin")}}

関連情報