インライン方向(横書きなら左右)のマージンをまとめて指定する論理プロパティです。margin-left/rightと違い、アラビア語などのRTL言語や縦書きでも意図通りのレイアウトになります。margin-inline: autoで中央寄せも書けます。
margin-inline: <length> | auto [<length> | auto].container {
max-width: 720px;
margin-inline: auto;
}margin-left/right: autoと同じ中央寄せを1行で
.button + .button {
margin-inline-start: 8px;
}書字方向に応じた「前側」の余白(LTRなら左、RTLなら右)
.card {
margin-inline: 16px 32px;
}開始側16px・終了側32pxを個別指定
横書き日本語サイトだけならmargin-left/rightと結果は同じですが、margin-inline: autoの中央寄せなど記述が短くなる場面が多く、新規コードでは論理プロパティに寄せるのがモダンな書き方です。個別指定はmargin-inline-start / margin-inline-end。
margin-inlineは「左右」ではなく「書字方向のインライン軸」です。writing-mode: vertical-rl(縦書き)では上下方向に効きます。物理方向を固定したい装飾(例: 画面左端に固定)にはmargin-leftを使い分けます。
AIは国際化(RTL)対応の文脈でもmargin-left/rightを出しがちです。RTL・縦書き対応を求めるなら「論理プロパティで」と明示すると精度が上がります。逆にAIがmargin-inlineを使ったコードを古いブラウザ向けに書き直す際、start/endの対応(LTRでstart=左)を取り違えることがあります。
このCSSのmargin-left/margin-rightを論理プロパティ(margin-inline系)に置き換えて。RTLでも崩れないように
コンテナの中央寄せをmargin-inline: autoで書いて、縦書きモードでの挙動も説明して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。