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から生まれる隙間が無くなるわけです。
同様にimgをdisplay: blockにしてしまえば、vertical-alignの影響は受けないので、隙間が無くなります。
調べてそのまま使うのもいいんですが、こうして仕組みを知っておくなら、vertical-alignを少し理解でき適切に利用することができるでしょうね。
