margin
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
試してみましょう
margin: 1em; margin: 5% 0; margin: 10px 50px 20px; margin: 10px 50px 20px 0; margin: 0; <section id="default-example"> <div id="container"> <div class="row"></div> <div class="row transition-all" id="example-element"></div> <div class="row"></div> </div> </section> #container { width: 300px; height: 200px; display: flex; align-content: flex-start; flex-direction: column; justify-content: flex-start; } .row { height: 33.33%; display: inline-block; border: solid #ce7777 10px; background-color: #2b3a55; flex-shrink: 0; } #example-element { border: solid 10px #ffbf00; background-color: #2b3a55; } 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* 四辺すべてに適用 */ margin: 1em; margin: -3px; /* 上下 | 左右 */ margin: 5% auto; /* 上 | 左右 | 下 */ margin: 1em auto 2em; /* 上 | 右 | 下 | 左 */ margin: 2px 1em 0 auto; /* anchor-size() の値 */ margin: 5% anchor-size(width); margin: calc(anchor-size(width) / 4) 1em 0 anchor-size(--myAnchor self-inline, 50px); /* キーワード値 */ margin: auto; /* グローバル値 */ margin: inherit; margin: initial; margin: revert; margin: revert-layer; margin: unset; margin プロパティは 1 ～ 4 つの値を使って指定することができます。それぞれの値は <length>、<percentage>、 または auto キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。
- 値が 1 つ指定された場合、全四辺に同じマージンが適用される。
- 値が 2 つ指定された場合、1 つ目のマージンは上下、2 つ目は左右の辺に適用される。
- 値が 3 つ指定された場合、1 つ目のマージンは上、2 つ目は左右、3 つ目は下の辺に適用される。
- 値が 4 つ指定された場合、マージンはそれぞれ上、右、下、左の順 (時計回り) に適用される。
値
<length>-
マージンの寸法を固定値で表したものです。
- アンカー位置指定要素の場合、
anchor-size()関数は、関連付けられたアンカー要素の幅または高さに対する相対的な<length>値に解決されます（アンカーサイズに基づいて要素のマージンを設定を参照してください）。
- アンカー位置指定要素の場合、
<percentage>-
マージンの寸法を包含ブロックのインラインサイズ（
writing-modeで横書き言語と定義されている場合は width）に対するパーセント値で示したものです。 auto-
ブラウザーが適切なマージンを選択して使用します。例えば、要素を中央揃えするためにこの値を使用することもあります。
解説
このプロパティを使用して、要素の全四辺のマージンを設定することができます。マージンは要素の周りに追加の領域を作成します。それに対して、 padding は要素内部に追加の領域を作成します。
top および bottom のマージンは、置換要素ではないインライン要素（<span> や <code> など）には効果がありません。
水平方向の中央揃え
margin: 0 auto; を設定すると、親要素内で要素を水平方向に中央揃えすることができます。
要素を水平方向に中央揃えにする一般的な方法としては、コンテナー内で display: flex; および justify-content: center; を設定する方法があります。これにより、フレックスアイテムの子要素が中央揃えになります。
マージンの相殺
要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくはマージンの相殺の習得を参照してください。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | table-caption, table, inline-table 以外の表の display 種別を除くすべての要素。 ::first-letter にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | length |
形式文法
margin =
<'margin-top'>{1,4}
<margin-top> =
<length-percentage> |
auto |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
例
基本的な例
HTML
<div class="center">この要素は中央揃えされています。</div> <div class="outside">この要素はコンテナーの外側に配置されています。</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 のマージン */ /* ボックスは水平方向に中央 */ 仕様書
| Specification |
|---|
| CSS Box Model Module Level 3 # margin |