margin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

margin は CSS のプロパティで、要素の全四辺のマージン領域を設定します。

試してみましょう

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

構文

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

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

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

/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 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>

マージンの寸法を固定値で表したものです。

<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 にも適用されます。
継承なし
パーセント値包含ブロックの幅に対する相対値
計算値一括指定の次の各プロパティとして
  • margin-bottom: 指定されたパーセント値または絶対的な長さ
  • margin-left: 指定されたパーセント値または絶対的な長さ
  • margin-right: 指定されたパーセント値または絶対的な長さ
  • margin-top: 指定されたパーセント値または絶対的な長さ
アニメーションの種類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

html
<div class="center">この要素は中央揃えされています。</div>

<div class="outside">この要素はコンテナーの外側に配置されています。</div>

CSS

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

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

その他の例

css
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

ブラウザーの互換性

BCD tables only load in the browser

関連情報