【CSS Modules】margin-inline-endプロパティの使い方

margin-inline-endプロパティは、要素のインライン方向の終了側のマージンを保持するプロパティです。このプロパティは、CSS論理プロパティの一つであり、テキストの書字方向（writing-mode）、テキストの方向（direction）、およびテキストの向き（text-orientation）といった論理的なフローに基づいて、マージンが適用される物理的な位置を決定します。

具体的に説明しますと、例えば日本語や英語のような左から右へ文字を読み進める（L-R）文書では、margin-inline-end は要素の右側にマージンを設定します。しかし、アラビア語やヘブライ語のように右から左へ文字を読み進める（R-L）文書の場合には、このプロパティは要素の左側にマージンを設定します。また、縦書きの文書では、margin-inline-end が物理的な下側や上側にマージンを適用する場合があります。このように、コンテンツの書字方向に応じてマージンの位置が自動的に調整されるため、物理的な margin-right や margin-left のような固定された方向ではなく、コンテンツの流れに沿った柔軟な間隔設定が可能になります。

このプロパティを使用する主な利点は、国際化されたWebサイトや多言語対応のアプリケーションを開発する際に、レイアウトの一貫性を保ちながら効率的にスタイリングを行える点にあります。書字方向が異なる言語でも共通のCSSプロパティ margin-inline-end を使用するだけで、それぞれの言語に最適なマージンが適用されるため、保守性が向上し、開発の手間を削減できます。

margin-inline-end プロパティには、ピクセル（px）やパーセンテージ（%）などの長さの単位、または auto キーワードを指定できます。これにより、要素のインライン方向の終了側における間隔を精密に制御することが可能です。

Copy
1.element {
2  margin-inline-end: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません