CSS

A way to point to “the beginning side” of a line that changes automatically depending on the writing direction, like left for LTR and right for RTL.

inline-start

文字が流れる向きに合わせて、自然に「行の始まり側」を指定できる書き方で、左から右の言語なら左、右から左の言語なら右が自動で対象になります。

inline-start とは？

inline-start は、「文字が流れる方向の“はじまり側”」を指すためのキーワードです。

通常、左から右に文字を書く言語では inline-start は 左側を、右から左に書く言語では 右側を指します。

つまり、ページの書字方向に合わせて自動的に変わる位置を示せます。

たとえば、左から右に書く言語では margin-inline-start を使うと、「左側のmargin」がつきます。

しかし、右から左の言語に切り替わると、自動的に「右側のmargin」になります。

「LTR / RTL を意識せずに、どちらでも使える位置指定」が欲しいときに便利です。

サンプルコード

CSS

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

HTML

<div class="box">
    このボックスは、書字方向に応じて余白の付く位置が変わります。
</div>

ポイント