CSSのmargin相殺とは

## はじめに
marginの相殺は、垂直マージンを指定した2つの<font color="red">ブロックレベル要素</font>が並んだときに起き、2つのマージンのうち大きい方が一つのマージンとして採用されます。marginの相殺には、ルールがあるため、それをこの記事でまとめていきたいと思います。
## marginの相殺のルール
### 1. 垂直マージンのみ相殺
<font color="red">垂直マージン</font>のみが相殺され、水平マージンが相殺されることはありません。実際のコードの例で見てみます。
2つの兄弟の```div```要素を```inline-block```にして左右にマージンを与えます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659426/0fe5ecb0-025b-8219-cc8a-68b0c8bc8066.png" width=50%>
```html
    <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```となっています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659426/25b33454-8b57-b72b-056b-8df63a1f9862.png" width=50%>
```html
    <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.大きい方のマージンを採用する
上下のマージンが同じ値の場合は、相殺され、その値が採用されますが、異なる値だった場合は、<font color="red">より大きい方のマージン</font>を採用します。
実際のコードで、上の要素に```100px```のマージン、下の要素に```50px```のマージンをつけてみます。すると、上の要素の100pxの下方向マージン採用していることが分かります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659426/f2b13f3d-b280-ae23-b934-9b28fc2bda5d.png" width=50%>
```html
    <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```要素は<font color="red">入れ子</font>になっているにも関わらず、マージンの相殺を防ぐことはできません。
つまり、入れ子構造にしても親要素に、子要素のマージンが影響し、相殺し合っていることが分かります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659426/20410ad5-bf6e-35d0-b4a1-3ddbb23e3440.png" width=50%>
```html
    <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```があった場合、それが壁となってマージンの相殺は起こりません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2659426/79c50efd-f6a4-24de-fb5b-d13e8108a89a.png" width=50%>

### 5.その他の特徴
今まで上げたマージンのルールの他にも、下のような特徴が存在します。
* 同じ方向のマージンも相殺される
* 3つ以上のマージンも相殺される
* 負のマージンを利用することができる
* 空の要素の上下マージンも相殺される
## 例外：マージンの相殺が起きない場合
マージンの相殺はブロックレベルの要素にのみ適用されるため、```display```プロパティが```block```,```list-item```,```table```のいずれかの時のみに発生します。
そのため、```flex```アイテムや```grid```アイテム、```絶対値アイテム```などのブロックレベルではない要素には適用されません。また、4で述べたように```border```や```padding```が親にあった時にも、子供と親のマージンが直接接触しないことから相殺されることはありません。