左に余白、それとも行の先頭？margin-inline-startで文字の方向を比べよう

日本語の横書きで左に空けた余白が、右から左へ読む画面でも同じ目的に合うとは限らない。物理的な左右と、文字の流れに対する先頭を分けて考えてみよう。

この記事ではmargin-leftとmargin-inline-startを、横書きの作例で比べる。準備はブラウザだけ。実際のサイトの言語や方向は変更せず、作例内の箱だけを切り替えるよ。

左と、行が始まる側

margin-leftは、物理的な左側の外側余白。margin-inline-startは、インライン方向の始まり側に対応する論理プロパティだよ。

横書きでは、左から右の方向なら先頭は左、右から左なら先頭は右になる。縦書きではwriting-modeも関係するので、「inline-startはいつでも右か左」と決めつけないようにしよう。

.fixed { margin-left: 24px; }
.logical { margin-inline-start: 24px; }

どちらが正解かは目的による。画面の物理的な左へ置く指定と、読む流れに合わせる指定を使い分けたいね。

動かしてみよう

記事下の作例には、同じ大きさの対象を二つ置いている。上はmargin-left、下はmargin-inline-start。横書きの方向を切り替え、箱の中でどちら側が空くかを見る。

1. 左から右の状態で、両方の位置を比べる。
2. 右から左へ切り替える。
3. 上の余白は左、下の余白は右に対応することを確認する。
4. リセットで左から右へ戻す。

作例の行はFlexで配置している。並びの開始側も方向に影響されるので、色の付いた対象だけでなく、行の枠と余白の左右を一緒に見よう。結果欄には、論理余白が対応した左右の値も表示する。

既存の指定を足す前に読む

margin-leftを残したまま、同じ目的のmargin-inline-startを足すと、方向や指定の順番によって意図が分かりにくくなる。どのCSSが最終的に効いているかを開発者ツールで確認しよう。

余白の置き換えだけで多言語対応が完成するわけではない。アイコンの意味、文章、読み順なども別の確認が必要だよ。

選ぶ前の問い

「画面の左から離したい」のか、「読む方向の先頭から離したい」のかを書き出す。横書きの一方向だけでなく、想定する言語と表示でも確かめたいね。

見た目と読み順はCSSのorderとキーボードの順序、基本の整列はtext-alignへ。

参照した公式資料

• MDN：margin-inline-start

確認日：2026年10月24日。