CSS

margin-inline-end とは？

margin-inline-end は、文章の流れの「終わり側」にある余白を作るためのプロパティです。

たとえば、英語のように左から右へ書く言語なら「右側のマージン」を意味しますが、アラビア語のように右から左へ書く言語では「左側のマージン」になります。

つまり、このプロパティは「書く向き」に合わせて自動的にどちら側の余白かを判断してくれる便利なマージンです。

固定的な margin-right の代わりに使うと、多言語対応（LTR・RTL）に強くなります。

使い方の例

こう書けばOKです：

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

この場合、段落（p）の「文章の終わり側」に 20px の余白が付きます。

英語サイトなら右側、日本語サイトでも通常は右側になりますが、もし文章方向を逆にしたら、反対側（左）に余白が付きます。

ポイント

• margin-inline-end は「物理的な方向」ではなく「論理的な方向」で余白を指定する。
• 書字方向が変わっても余白の位置を自動で切り替えてくれる。
• margin-inline-start とセットで使うと、左右の余白を方向に依存せずコントロールできる。