margin block / margin inlineとは？CSSの上下左右を置き換える手順
- 公開日:
- メンテナンス日:
広告
広告
FAQ
- margin-block と margin-top/bottom の違いは何ですか？
- 物理的な「上・下」を指定する
margin-top/bottomに対し、margin-blockは 書字方向（縦書き・横書き）に連動 して余白を制御する「論理プロパティ」です。横書きなら上下、縦書きなら左右の余白として機能するため、多言語対応や縦書きデザインで威力を発揮します。詳細は 論理プロパティの概念 をご覧ください。
- margin-inline を使って要素を中央寄せ（センタリング）できますか？
- はい、可能です。
margin-inline: auto;と記述するだけで、従来のmargin-left: auto; margin-right: auto;と同じ効果を たった一行 で得られます。モダンなコーディングでは margin-inlineによるセンタリング が推奨されています。
- margin-block-start など、特定の方向だけ指定することは可能？
- 可能です。
margin-block-start（先頭）やmargin-block-end（末尾）を使えば、特定の方向のみ論理的に指定できます。物理プロパティとの対応表は、記事内の margin-blockの使いどころ にまとめています。
- 折りたたみマージン（相殺）は論理プロパティでも発生しますか？
- はい、物理プロパティと同様に block方向（要素の積み重なる方向） の余白が隣接した場合にはマージンの相殺が発生します。この挙動については 折りたたみマージンの解説 で詳しくおさらいできます。
広告
