CSS

Adds margin automatically to the starting side of text — left for left-to-right languages and right for right-to-left ones.

margin-inline-start

文章の書き始め側に自動で余白をつけてくれるプロパティで、左から書く言語なら左側、右から書く言語なら右側にマージンをつけられる。

margin-inline-start とは？

margin-inline-start は、文章の「書き始め側」にある余白（マージン）を設定するプロパティです。

「書き始め側」というのは、言語によって変わります。たとえば、英語のように左から書く言語では左側、日本語やアラビア語のように縦書き・右から書く言語では右側になります。

つまり、「ページのどちらがスタートなのか」を自動的に判断してくれる便利なプロパティです。

これを使うと、左寄せや右寄せをCSSで直接指定しなくても、言語の方向に合わせて自然に余白が調整されます。

多言語対応サイトや、縦書き対応デザインを意識するときにとても役立ちます。

サンプルコード

こう書けばOKです：

CSS

p {
    margin-inline-start: 20px;
}

この例では、段落（<p>）の書き始め側に20pxの余白をつけます。

英語の文章なら左側、日本語の縦書きなら右側や上側になることもあります。

もう少し詳しく

・「inline-start」とは？
行の方向に対して「始まり側」を指す言葉です。反対側は inline-end です。
・他のプロパティとの違い
margin-left や margin-right は常に左・右を基準にしますが、margin-inline-start は言語の向きに合わせて自動で切り替わります。
・実務での使いどころ
英語・アラビア語など多言語のUIを作るとき、または文章の方向（LTR/RTL）を切り替えるデザインで統一感を出すときに便利です。