CSS - マージンの相殺

場合によっては、2つの余白が1つの余白にまとめられることがあります。

マージンの相殺

要素の上端と下端のマージンは、2つのマージンのうち最大のマージンに等しい1つのマージンにまとめられることがある。

これは、左右の余白では発生しません。上下の余白のみ発生します！

次の例を見てください。

マージンの相殺のデモンストレーション

h1 { margin: 0 0 50px 0; } h2 { margin: 20px 0 0 0; }

上記の例では、<h1> 要素の下余白は50pxで、<h2>要素の上余白は20pxに設定されています。

常識的には、<h1>と<h2>の間の垂直マージンは合計70px(50px+20px)になると思われます。しかし、マージンの相殺により、実際のマージンは50pxになります。

プロパティ	説明
margin	1つの宣言ですべてのマージンプロパティを設定するための簡略プロパティ
margin-bottom	要素の下マージンを設定します
margin-left	要素の左マージンを設定します
margin-right	要素の右マージンを設定します
margin-top	要素の上マージンを設定します