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

margin-inlineプロパティは、ブロック要素の論理的なインライン方向のマージンを保持するプロパティです。このプロパティは、CSSの論理プロパティの一つであり、物理的な左右のマージン（margin-leftやmargin-right）とは異なり、テキストの書き込み方向（writing-mode）や行の進行方向（direction）に基づいて自動的にマージンの適用位置を調整します。

具体的には、margin-inlineはmargin-inline-startとmargin-inline-endという二つの論理的なマージンプロパティのショートハンドです。これにより、国際化対応が必要なウェブサイトやアプリケーションにおいて、言語や地域によってテキストの記述方向が異なる場合でも、スタイルシートを変更することなく適切なマージンを適用できます。例えば、英語のような左から右へ記述する言語ではmargin-inline-startが左マージンに、アラビア語のような右から左へ記述する言語では右マージンに相当します。

このプロパティに一つの値を指定すると、その値がmargin-inline-startとmargin-inline-endの両方に適用されます。二つの値を指定した場合は、一つ目の値がmargin-inline-startに、二つ目の値がmargin-inline-endにそれぞれ適用されます。

margin-inlineプロパティを利用することで、レイアウトの柔軟性と保守性が向上し、将来的な多言語展開を考慮した設計を効率的に行うことが可能になります。これは、システムの国際化対応において非常に重要な役割を果たすプロパティです。

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

引数なし

引数はありません

戻り値なし

戻り値はありません