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

margin-blockプロパティは、CSSにおいてブロック軸方向の外部余白（マージン）を一括で設定するための論理的なショートハンドプロパティです。このプロパティは、物理的な方向（上、下、左、右）に依存せず、テキストの書字方向や文書の流れに沿った「開始」と「終了」の概念に基づいて余白を定義します。具体的には、margin-block-start と margin-block-end という2つのプロパティの値を一度に設定するために使用されます。

従来の margin-top や margin-bottom といった物理プロパティが常に画面上の特定の位置に余白を適用するのに対し、margin-block は要素の writing-mode (書字方向) や direction (方向) に応じて、その適用される物理的な位置が変化します。例えば、日本語や英語のような左から右へ記述する横書きモードでは、margin-block は margin-top と margin-bottom に相当します。しかし、縦書きモードや、アラビア語のように右から左へ記述する言語では、それに応じて margin-left や margin-right といった物理プロパティにマッピングされます。

この特性により、国際化されたウェブサイトや多言語対応のアプリケーションを開発する際に、書字方向が変わってもレイアウトを柔軟かつ一貫して保つことができ、CSSの記述を簡潔に保つことが可能です。開発者は、各言語の書字方向に合わせて個別のCSSを記述する手間を省き、より汎用的なスタイルを適用できます。

値は1つまたは2つ指定できます。1つの値を指定した場合、margin-block-start と margin-block-end の両方に同じ値が適用されます。2つの値を指定した場合、1つ目の値が margin-block-start に、2つ目の値が margin-block-end に適用されます。margin-block プロパティは、現代のレスポンシブデザインや国際化対応において非常に有用なツールであり、より堅牢で保守しやすいスタイルシートを作成するために活用されます。

Copy
1selector {
2  margin-block: 1em;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません