# margin-inline

> インライン方向（横書きなら左右）のマージンをまとめて指定する論理プロパティです。margin-left/rightと違い、アラビア語などのRTL言語や縦書きでも意図通りのレイアウトになります。margin-inline: autoで中央寄せも書けます。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/margin-inline/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/margin-inline

## 構文

```css
margin-inline: <length> | auto [<length> | auto]
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 87+ / Firefox 66+ / Safari 14.1+ / Edge 87+

## コード例

### 例1: margin-left/right: autoと同じ中央寄せを1行で

```css
.container {
  max-width: 720px;
  margin-inline: auto;
}
```

### 例2: 書字方向に応じた「前側」の余白（LTRなら左、RTLなら右）

```css
.button + .button {
  margin-inline-start: 8px;
}
```

### 例3: 開始側16px・終了側32pxを個別指定

```css
.card {
  margin-inline: 16px 32px;
}
```

## TIPS

横書き日本語サイトだけならmargin-left/rightと結果は同じですが、margin-inline: autoの中央寄せなど記述が短くなる場面が多く、新規コードでは論理プロパティに寄せるのがモダンな書き方です。個別指定はmargin-inline-start / margin-inline-end。

## よくある間違い

margin-inlineは「左右」ではなく「書字方向のインライン軸」です。writing-mode: vertical-rl（縦書き）では上下方向に効きます。物理方向を固定したい装飾（例: 画面左端に固定）にはmargin-leftを使い分けます。

## AIがよく間違えるポイント

AIは国際化（RTL）対応の文脈でもmargin-left/rightを出しがちです。RTL・縦書き対応を求めるなら「論理プロパティで」と明示すると精度が上がります。逆にAIがmargin-inlineを使ったコードを古いブラウザ向けに書き直す際、start/endの対応（LTRでstart=左）を取り違えることがあります。

## AIへの依頼文例

- このCSSのmargin-left/margin-rightを論理プロパティ（margin-inline系）に置き換えて。RTLでも崩れないように
- コンテナの中央寄せをmargin-inline: autoで書いて、縦書きモードでの挙動も説明して

## 関連プロパティ

- [margin](https://www.css-dictionary.com/property/margin.md)
- [padding-inline](https://www.css-dictionary.com/property/padding-inline.md)
- [logical-properties](https://www.css-dictionary.com/property/logical-properties.md)
- [writing-mode](https://www.css-dictionary.com/property/writing-mode.md)