画像の下の余白をなくす

画像を指定したとき、画像の下に空白ができた…なんてことありませんか？
hタグの中にimgタグを入れたり、テーブルの中に画像を入れたときなど…
これは、ブラウザのバグではなくて、CSSの仕様だそうです。

ビフォー

画像の下に余白ができるのは、ブラウザによっても異なるし、DOCTYPE宣言の違いによっても異なります。
そもそもこの余白って何？って感じですが、これの余白は画像をテキストのベースラインに揃えて表示されるからです。

ベースラインとは、アルファベットの小文字を書くとき"a"と"g"では"a"の下部と"g"の真ん中あたりが同じ位置にきます。"g"のほか、"p"や"q"などもベースラインよりも下に文字がはみ出ます。その"a"の下部の位置が基準となります。その基準がベースラインです。

アフター

画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればいいわけですね。
スタイルシートで以下のように設定してください。


img {
vertical-align: bottom;
}


これで、画像の下から空白が消えます。