【CSS】画像の下に謎の余白ができちゃう問題を解決する方法

地味に困るよね。 この記事の最新版を書き起こしました。 Webサイトを作っていると、画像の下に意図していない余白が生まれてしまうことがあります。
文章で書いても分かり辛いので、背景色付きのボックス内に画像を配置して実際に再現してみましょう。
画像の下に謎のスペースが出来ていますね。
それでは、さっさと解決しましょう。

vertical-align: bottom;

block要素にする

font-size , line-height → 0

対策としては、以上の3つが挙げられます。
どの方法を使ってもいいんですが、3番目の方法はちょっと無理矢理な感じが否めないですね…

なんで余白ができるの？

忘れがちですが、画像はインライン要素です。なので特に指定をしなかった場合、配置されるのはベースラインになります。
だからvertical-alignをbottom（下端揃え）にすると下の余白が無くなるんですね。

display:blockで画像自体をブロック化するというのが1番簡単ですが、その場合text-alignでの中央寄せが効かなくなるので注意。中央寄せしたい時はmargin: 0 autoを使いましょう。