【css】画像(img)の下に余白（隙間）ができる問題を秒で解決する方法

html上にimg要素として画像を配置する際、画像の下にmarginやpaddingでは消せない余白ができてしまうことがあると思います。
今回はこの謎の隙間を無くす方法をご紹介いたします。

なぜ隙間ができるのか？
この問題の解決方法

なぜ隙間ができるのか？

画像（img要素）に対して余白ができる原因は、画像を含むインライン要素が、ベースラインに配置されているためです。
つまり、imgを含むインライン要素（インラインブロックも含む）の初期値は「vertical-align: baseline;」ということになり、そのことがこの隙間ができる原因になっているのです。

この問題の解決方法

この問題はvertical-alignにbaseline以外のものを指定することで解決します。

css

div{
	text-align:center;
}
img{
	vertical-align:top;
}

div{

text-align:center;

}

img{

vertical-align:top;

}

結果 (余白がなくなりました)

サンプルは「top」で指定しましたが、これ以外の「middle」、「bottom」などを指定して同様の効果を得ることができます。

画像の下の余白は、一般的には不要だとおもうので、imgの「vertical-align」の指定はかならずしておくことをお勧めします。

文中に画像を配置する予定があるなら、それを見越してtop, middle, bottom …どのパターンを主に使うか考慮してimgに「vertical-align」の設定をしておくと余分なcssを記述する手間も省けて便利です。