【図解】どうして「vertical-align: middle;」でimg要素下の余白がなくなるのか？を解説してみた

HTML・CSSでコーディングしている際、img要素下に謎の余白が出てくることってありませんか？

これは、img要素に`vertical-align: middle;`を設定すれば解決します。

でも、

- **そもそもなぜこのような現象が起こっているのか**
- **なぜこれで解決するのか**

について理解している方は少ないのではないでしょうか。
この記事ではその辺りについて解説していきます。

# img要素下に余白ができるってどういうこと？

例えば、div要素の中にimg要素を入れるHTMLがあるとします。(実際のコードは[こちら](https://codepen.io/v97ug/pen/RwpyJjB))

```html:HTML
<div class="outer-box">
  <img src="https://drive.google.com/uc?export=view&id=1LJA0-Kgs6oqGkt-M5magSgspj6SpSPM2">
</div>
```

これを表示すると以下のようになります。(わかりやすくするため、`outer-box`の背景を**赤**にしてます)

![ScreenShot 2021-06-06 15.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/9f100c71-ed1a-3257-1760-7597f6e377ad.png)

↑画像の下の部分に **謎の余白** (赤い線)ができていますね。。

# なぜこうなっているの？

なぜこうなっているかというと、２つのポイントがあります。

1. img要素は**インライン要素**である
2. インライン要素は、デフォルトで`vertical-align: baseline;`が設定される

`vertical-align: baseline;`を設定すると、画像の場合、ベースラインに画像が乗っかった形になります。

![Untitled (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/3aa7e747-be63-223e-c8af-19ad93dc93af.png)

でも、なぜBaselineで揃わずに、下に余白ができるのでしょうか？

ここで重要なのが、`font-size`と`line-height`です。

# インライン要素のfont-sizeとline-heightの関係

インライン要素では、`font-size`と`line-height`は以下のような感じになっています。

![Group 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/8a116620-92c0-59bb-c133-a01cb3be04c0.png)

文字通り、`font-size`は文字の大きさ、`line-height`は行間を指しています。

では、vertical-alignの値を変えると、それぞれどのようになるのでしょうか？
１個ずつみていきましょう。

# vertical-alignがtopの場合

![Baseline1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/9bb5f618-d8c5-5f9d-28d2-b1c895ad0cda.png)


topの場合、もし画像の縦幅がline-heightよりも大きくなった場合は、下に要素が拡張されます。

つまり、画像に余白ができる余地がありません。

bottomやmiddleの場合でも同じような考え方になります。

# vertical-alignがbottomの場合

![Baseline1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/aca463c2-5234-94fd-0856-bedcfb56991b.png)


bottomの場合は、もし画像の縦幅がline-heightよりも大きくなった場合は、上に要素が拡張されます。

こちらも、画像に余白ができる余地がありませんね。

# vertical-alignがmiddleの場合

![Baseline1 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/a1f7b76f-bd19-da11-3a96-31dc69c1dd6e.png)


もし画像の縦幅がline-heightよりも大きくなった場合は、上下均等に要素が拡張されます。

こちらも、画像に余白ができる余地がないでしょう。

# vertical-alignがbaselineの場合

![Baseline1 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/f3abdd21-b987-cbae-0ba3-f3c8984ea4b3.png)


baselineだと、もし画像の縦幅がline-heightよりも大きくなった場合、上には拡張されますが、**下には拡張されません。**
(baselineの上に乗っかっているだけなので)

こうなると、ベースラインの下側は自然と空きますよね。
なので、画像下に余白ができてしまいます。

# 例えるなら、ブロックの上に写真を載せているようなもの

🧑:「vertical-alignをtopやmiddleにしたら余白が消えましたが、なぜでしょう」
と思う方も多くいらっしゃると思いますが、

個人的にはこれはむしろ逆で、**「baselineを設定すると余白ができる」**のほうが適切かなと思っています。

それは例えるなら、baselineというブロック塀の上に写真を載せているようなものでしょうか(笑

![332492_s.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136124/717ec7ee-6742-d282-a988-e4278ded1c6f.jpeg)

ブロックの上に載っている限りブロックは無くならないので、余白ができてしまう、と理解するといかがでしょう(伝わっていたら嬉しいです💦)

# 参考

- [理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference](https://html5experts.jp/takazudo/13339/)
- [理解しておきたい、CSSによるインラインレイアウトの仕組み（vertical-align編その2）Inline Layout─Frontrend Conference](https://html5experts.jp/takazudo/13592/)
- [vertical-align－スタイルシートリファレンス](http://www.htmq.com/style/vertical-align.shtml)