margin-left
===========

**`margin-left`** は CSS のプロパティで、要素の左側のマージン領域を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。

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

2 つの隣り合うボックスの垂直マージンは融合することがあります。これは*マージンの相殺*と呼ばれています。

まれに幅の制約がきつすぎると (つまり、 `width`, `margin-left`, `border`, `padding`, コンテンツ領域, `margin-right` がすべて定義されていた場合)、 `margin-left` は無視され、 `auto` が設定されていたときと同じ計算値になります。

構文
--


```css
/\* <length> 値 \*/
margin-left: 10px; /\* 絶対的な寸法 \*/
margin-left: 1em; /\* 文字の寸法からの相対 \*/
margin-left: 5%; /\* 直近のブロックコンテナーの幅からの相対 \*/

/\* キーワード値 \*/
margin-left: auto;

/\* グローバル値 \*/
margin-left: inherit;
margin-left: initial;
margin-left: revert;
margin-left: revert-layer;
margin-left: unset;
```


`margin-left` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。

### 値

`<length>`

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

`<percentage>`

マージンの寸法を包含ブロックのインラインサイズ（`writing-mode` で横書き言語と定義されている場合は *width*）に対するパーセント値で示したものです。

`auto`

左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。

| `display` の値 | `float` の値 | `position` の値 | `auto` の計算値 | コメント |
| --- | --- | --- | --- | --- |
| `inline`, `inline-block`,
 `inline-table` | *任意* | `static` または `relative` | `0` | インラインレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | *任意* | `static` または `relative` | `0`。ただし `margin-left` と `margin-right` が共に `auto` であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。 | ブロックレイアウトモード |
| `block`, `inline`, `inline-block`,
 `block`, `table`, `inline-table`,
 `list-item`, `table-caption` | `left` または `right` | `static` または `relative` | `0` | ブロックレイアウトモード (浮動要素) |
| *すべての* `table-*`*、ただし* `table-caption` *を除く* | *任意* | *任意* | `0` | 内部の `table-*` 要素にはマージンがない。代わりに `border-spacing` を使用のこと |
| *任意、ただし* `flex`, `inline-flex`, `table-*` *を除く* | *任意* | *`fixed`* または `absolute` | `0`。ただし `margin-left` と `margin-right` が共に `auto` 出逢った場合を除く。この場合、利用可能な `width` の中で境界領域が中央揃えされる値が設定される (fixed の場合)。 | 絶対位置指定レイアウトモード |
| `flex`, `inline-flex` | *任意* | *任意* | `0`。ただし、水平方向に正の余白がある場合を除く。この場合、 `auto` を指定したすべてのマージンに均等に分配される。 | フレックスボックスレイアウトモード |

公式定義
----

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

形式文法
----
```

margin-left =   
  <length-percentage>  |  
  auto                   
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

例
-

`margin-left` をパーセント値で指定すると、コンテナーのインラインサイズに対する相対になります。

### CSS


```css
.example {
  margin-left: 50%;
}
```

### HTML


```html
<p>
  A large rose-tree stood near the entrance of the garden: the roses growing on
  it were white, but there were three gardeners at it, busily painting them red.
</p>
<p class="example">
  Alice thought this a very curious thing, and she went nearer to watch them,
  and just as she came up to them she heard one of them say, "Look out now,
  Five! Don't go splashing paint over me like that!"
</p>
<p>
  "I couldn't help it," said Five, in a sulky tone; "Seven jogged my elbow."
</p>
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `margin-top`, `margin-right`, `margin-bottom` と `margin` 一括指定
* 対応付けられる論理的プロパティ: `margin-block-start`, `margin-block-end`, `margin-inline-start`, `margin-inline-end` および一括指定の `margin-block` と `margin-inline`