サイト制作
CSSのmargin-inlineとは？「左右」ではなく文字の流れに合わせて余白を付ける
2026-11-08
この記事には広告・アフィリエイトリンクが含まれます。
margin-leftとmargin-rightをまとめるだけではない論理プロパティ。横書き・縦書き・右から左の文章で、余白の意味がどう変わるかを説明します。
インライン方向の、始まりと終わりの余白
margin-inlineは、文字が並ぶ方向の始まりと終わりにマージンを指定するCSSです。通常の日本語の横書き・左から右の配置なら左右に対応しますが、書字方向によって対応する辺が変わります。
MDNとCSS Logical Propertiesの仕様では、このように物理的な上下左右ではなく、文章の流れを基準にするプロパティとして説明されています。左右の短縮形とだけ覚えると、縦書きで迷いやすくなります。
値を一つ書く場合と、二つ書く場合
margin-inline: 16px; は、始まりと終わりの両方に16pxを指定します。margin-inline: 16px 24px; は、始まりに16px、終わりに24pxです。
この二つ目は、いつでも左16px・右24pxという意味ではありません。右から左へ流れる文章や縦書きで、どちらが始まりになるかが変わります。同じ部品を複数の書字方向で使うなら、その意味に合わせて余白を指定できるのが利点です。
中央寄せでは、幅の条件も確認する
横書きの通常のブロック配置で、親より狭い幅を持つ要素を中央に置く例なら、max-width: 60rem; と margin-inline: auto; を組み合わせる方法があります。余った幅を両側の自動マージンへ分ける考え方です。
ただし、autoを書けばどんな配置でも中央になるわけではありません。要素の幅、親の幅、FlexboxやGridなどのレイアウト方式を合わせて確認します。横幅いっぱいの要素では、見える左右余白が生まれないこともあります。
変更後は、書字方向と既存ルールを一緒に見る
既存CSSにmargin-leftなどが残っていると、同じ辺を別の指定で上書きする可能性があります。開発者ツールで計算後の値を見て、どの宣言が効いているか確認しましょう。
本文は仕様の説明と記述例であり、個別サイトでの動作を実測した報告ではありません。通常の横書き、右から左、縦書きを使う範囲で切り替え、余白が意図した「始まり・終わり」に付くか試すと、論理プロパティの意味を確かめられます。
