HTMLのコーディングをしていると、画像の下に隙間が空いていることに気づくことはありませんか？
対処方法は知ってはいても、なぜ隙間が空くのか考えてみると面白いです。
画像の下に隙間が空く
事例：
https://jsbin.com/nimedav/edit?html,css,output
divの中にimgが入っていて、divの内部は100pxの大きさがあります。
そしてこの画像は正方形なので、隙間ができるはずがないように思えます。
でも実際は以下のように下に隙間が出てしまいます。
これを対処する方法はいくつかあります。
(1)img タグに vertical-align: top か vertical-align: bottom を付けます。
(2)img タグを display: block でブロック要素に変えます。
なぜ画像の下に隙間が空く？
img は inline-block のような振る舞いをします。
つまり文字と横並びになります。
そうすると、以下のように画像と文字が横に並びます。
この時注目するのは、画像の下の余白と g の文字の下のでっぱり部分です。abc と違って g は下に出っ張ります。そのための余白が文字の下にあらかじめ設けられているわけです。
これは画像にも影響します。
なぜなら vertical-align （行ボックスの中でインラインやインラインブロックの垂直方向配置方法）が baseline になっていて、それは inline-block にも影響を与えるからです。
よって、画像に対して vertical-align: top か vertical-align: bottom を設定することで baseline から生まれる隙間が無くなるわけです。
同様に display: block にしてしまえば、 vertical-align の影響は受けないので、隙間が無くなります。
調べてそのまま使うのもいいんですが、こうして仕組みを知っておくなら、 vertical-align を少し理解でき適切に利用することができるでしょうね。
