CSS

padding-inline-start とは？

まずざっくり言うと、「文字が並ぶ向きに合わせて、スタート側の余白を作るためのプロパティ」です。

もう少し砕いて言うと、文章って「左から右」だったり「右から左」だったり、言語によって向きが違いますよね。

padding-inline-start は、その “文章の流れのスタート側” にスペース（パディング）をつけるための CSS です。

• 日本語や英語のような 左→右（LTR） の場合：スタートは 左側
• アラビア語のような 右→左（RTL） の場合：スタートは 右側

なので、普通の padding-left と似ていますが、「言語の向きに合わせて自動で切り替わる」という点が一番のメリットです。

サンプルコード

こう書けばOKです。

.box {
    padding-inline-start: 20px;
}

<div class="box">
    このボックスは、文章のスタート側に 20px の余白がつきます。
</div>

どんなときに使う？

• 国際化対応したい（多言語に対応するサイト）
• LTR / RTL を意識したデザインにしたい
• 普通の padding-left だと、右から左の言語で見たときに崩れる可能性がある

言語ごとに CSS を書き分ける必要がなくなるので、とても便利です。

注意点

• padding-left と違い、書字方向（writing-mode） の影響を受けます
  → 例えば縦書きでも “テキストの流れの開始側” へ余白がつきます
• デザインを固定したい場合は padding-left のほうが分かりやすい場合もあります
  → 多言語化しない前提なら「左で固定したい」ケースがあります