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

margin-block-endプロパティは、要素のブロック方向の末尾に設定されるマージンのサイズを保持するプロパティです。このプロパティは、テキストがブロックとして配置される際の「終わり」側のマージンを定義します。具体的には、文書の書き込みモード（writing-mode）やテキストの方向（direction）といった設定に応じて、物理的な上下左右のマージンのいずれかに対応します。

例えば、一般的な左から右へ横書きする言語（L-R）では、通常margin-bottomと同じ効果を持ちます。しかし、縦書きモード（例: writing-mode: vertical-rl）が適用された場合、margin-block-endは物理的な右マージンに相当するようになります。

このように、コンテンツの論理的な流れに基づいてマージンを適用するため、物理的な配置に依存するmargin-bottomなどとは異なり、レイアウトが国際化対応や多言語化された際にも一貫した表示を保ちやすくなります。これにより、異なる言語や書き込みモード間でのスタイルの調整がより効率的に行えるようになります。

設定可能な値は、具体的な寸法を指定するlength（例: 16px）、親要素に対する割合で指定するpercentage（例: 5%）、ブラウザに自動で算出させるauto、初期値に戻すinitial、親要素から値を継承するinheritなどがあります。

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

引数なし

引数はありません

戻り値なし

戻り値はありません