CSS辞書

margin-inline

スペーシング・サイズ

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

構文

Syntax
margin-inline: <length> | auto [<length> | auto]

コード例

1

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

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

2

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

書字方向に応じた「前側」の余白(LTRなら左、RTLなら右)

3

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

開始側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で書いて、縦書きモードでの挙動も説明して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

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