はじめに
marginの相殺は、垂直マージンを指定した2つのブロックレベル要素が並んだときに起き、2つのマージンのうち大きい方が一つのマージンとして採用されます。marginの相殺には、ルールがあるため、それをこの記事でまとめていきたいと思います。
marginの相殺のルール
1. 垂直マージンのみ相殺
垂直マージンのみが相殺され、水平マージンが相殺されることはありません。実際のコードの例で見てみます。
2つの兄弟のdiv要素をinline-blockにして左右にマージンを与えます。
<div class="container">
<div class="block"></div>
<div class="block"></div>
</div>
<style>
.block {
display: inline-block;
background: blue;
height: 100px;
width: 100px;
margin: 0 100px;
}
</style>
2.隣り合う要素のみが相殺
2つの兄弟のdiv要素間に、<br>タグを加えます。<br>タグは空の不可視要素ですが、二つの要素間に他の要素がある場合はマージンの相殺をブロックすることが出来ます。
<br>がなければ、マージンが相殺されて100pxになりますが、今回は200pxとなっています。
<div class="container">
<div class="block"></div>
<br>
<div class="block"></div>
</div>
<style>
.block {
background: blue;
height: 100px;
width: 100px;
margin: 100px;
}
</style>
3.大きい方のマージンを採用する
上下のマージンが同じ値の場合は、相殺され、その値が採用されますが、異なる値だった場合は、より大きい方のマージンを採用します。
実際のコードで、上の要素に100pxのマージン、下の要素に50pxのマージンをつけてみます。すると、上の要素の100pxの下方向マージン採用していることが分かります。
<div class="container">
<div class="block block-1"></div>
<div class="block block-2"></div>
</div>
<style>
.block {
background: blue;
height: 100px;
width: 100px;
}
.block-1{
margin: 100px;
}
.block-2{
margin: 50px;
}
</style>
4.入れ子構造で相殺は防げない
1つめのdiv要素は入れ子になっているにも関わらず、マージンの相殺を防ぐことはできません。
つまり、入れ子構造にしても親要素に、子要素のマージンが影響し、相殺し合っていることが分かります。
<div class="container">
<div>
<div class="block"></div>
</div>
<div class="block"></div>
</div>
<style>
.block {
background: blue;
height: 100px;
width: 100px;
margin: 100px;
}
</style>
しかし、入れ子の親にborderやpaddingがあった場合、それが壁となってマージンの相殺は起こりません。
5.その他の特徴
今まで上げたマージンのルールの他にも、下のような特徴が存在します。
- 同じ方向のマージンも相殺される
- 3つ以上のマージンも相殺される
- 負のマージンを利用することができる
- 空の要素の上下マージンも相殺される
例外：マージンの相殺が起きない場合
マージンの相殺はブロックレベルの要素にのみ適用されるため、displayプロパティがblock,list-item,tableのいずれかの時のみに発生します。
そのため、flexアイテムやgridアイテム、絶対値アイテムなどのブロックレベルではない要素には適用されません。また、4で述べたようにborderやpaddingが親にあった時にも、子供と親のマージンが直接接触しないことから相殺されることはありません。