margin
======

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

試してみましょう
--------

構成要素のプロパティ
----------

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

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`
構文
--


```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>` などの置換要素ではないインライン要素には効果がありません。

### 水平方向の中央揃え

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

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

### マージンの相殺

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

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `margin-bottom`: `0`
* `margin-left`: `0`
* `margin-right`: `0`
* `margin-top`: `0`
 |
| 適用対象 | `table-caption`, `table`, `inline-table` 以外の表の `display` 種別を除くすべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 包含ブロックの幅に対する相対値 |
| 計算値 | 一括指定の次の各プロパティとして* `margin-bottom`: 指定されたパーセント値または絶対的な長さ
* `margin-left`: 指定されたパーセント値または絶対的な長さ
* `margin-right`: 指定されたパーセント値または絶対的な長さ
* `margin-top`: 指定されたパーセント値または絶対的な長さ
 |
| アニメーションの種類 | length |

形式文法
----
```

margin =   
  <'margin-top'>{1,4}    
  
```

例
-

### 簡単な例

#### HTML


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

<div class="outside">This element is positioned outside of its container.</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 with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* CSS 基本ボックスモデル入門
* マージンの相殺
* `margin-top`, `margin-right`, `margin-bottom`, `margin-left`
* 対応する論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`