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方向（要素の積み重なる方向）の余白が隣接した場合にはマージンの相殺が発生します。この挙動については折りたたみマージンの解説で詳しくおさらいできます。

次世代CSSは論理プロパティ！margin-block、margin-inlineを徹底解剖！ - セブ島海外ノマドエンジニアの日記【銀ねこアトリエ】

Q: margin-block と margin-top/bottom の違いは何ですか？

物理的な「上・下」を指定する margin-top/bottom に対し、 margin-block は 書字方向（縦書き・横書き）に連動 して余白を制御する「論理プロパティ」です。横書きなら上下、縦書きなら左右の余白として機能するため、多言語対応や縦書きデザインで威力を発揮します。詳細は 論理プロパティの概念 をご覧ください。

Q: 折りたたみマージン（相殺）は論理プロパティでも発生しますか？

はい、物理プロパティと同様に block方向（要素の積み重なる方向） の余白が隣接した場合にはマージンの相殺が発生します。この挙動については 折りたたみマージンの解説 で詳しくおさらいできます。

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の使いどころにまとめています。