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

margin-block-startプロパティは、ブロック要素の開始方向の外側の余白（マージン）を保持し、設定するプロパティです。これはCSSの論理プロパティの一つであり、物理的な上下左右の概念ではなく、文書の書字方向（writing-mode）やテキストの向き（direction、text-orientation）に基づいて余白の適用方向が決定されます。具体的には、インライン軸（テキストが流れる方向）と直交するブロック軸の開始側にマージンを設定します。

例えば、日本語の横書き（左から右へ書くモード）の場合、ブロックの開始方向は通常上方向となるため、margin-block-startは従来のmargin-topプロパティと同じ効果を発揮します。しかし、書字モードが縦書きに設定されている場合、ブロックの開始方向は左または右となるため、このプロパティはmargin-leftまたはmargin-rightに相当するマージンを設定することになります。

このプロパティを使用することで、開発者は書字方向が異なる言語や、テキストの向きが変更されるレイアウトにおいても、一貫した視覚的な間隔を簡単に維持できます。これにより、国際化対応されたウェブサイトや、ユーザーが書字モードを切り替えられるような動的なコンテンツの構築がより効率的に行えます。値には、具体的な長さ（例: 1em、20px）、親要素に対するパーセンテージ（例: 5%）、またはブラウザに自動調整させるautoを指定できます。要素間の間隔を、書字モードに依存しない形で柔軟に制御するための、非常に強力なツールです。

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

引数なし

引数はありません

戻り値なし

戻り値はありません