上下に隣接するマージンはどうなる？！　～大が小を飲み込む弱肉強食の世界～

上下に隣接するマージンはどうなる？！

上下に隣接する要素にそれぞれマージンを設定するとどうなるのでしょうか？下の４つのボックス領域を使って実験してみたいと思います。それぞれ高さは50ピクセル、幅は200ピクセルに設定してあります。

青のボックス001にマージンボトム50ピクセルを設定

一番上の青いボックス001■にマージン下（ボトム）50ピクセルを設定したのが下のサンプルです。二番目の緑のボックス■との間隔が50ピクセル開きました。

緑のボックスにマージントップを40ピクセル設定すると？

　ここで、二番目の緑のボックス■にマージン上（トップ）を40ピクセル設定するとどうなるでしょうか？普通に足し算すると「50 + 40 = 90」で、青■と緑■のマージンは合計90ピクセルになりますが、実際は以下のようになります。

　ご覧の通り、青■と緑■の間隔にまったく変化がありません。これは、隣接する青■と緑■のマージンを比較して、値の大きい青のボックス■のマージンボトム50ピクセルが優先的に適用され、値の小さい緑のボックス■のマージントップ40ピクセルが無視されている結果です。

注意：相殺ではなく、小さい値が無視されるだけ！

　市販の参考書等には「相殺」という表現が用いられることが多いようですが、一般的な「相殺」の用語が意味するように上下のマージンが打ち消されてしまうわけではなく、あくまでも「値の大きいマージンが優先的に適用され、値の小さいマージンが無視される」だけですので、誤解のないようにご注意ください。