imgタグで指定した画像の下にわずかな隙間（空白）が空いてしまう

画像を指定したとき、画像の下に空白ができた、なんてことありませんか？hタグやtableタグ内にimgタグを入れたりしたときなど。これはブラウザのバグではなくて、CSSの仕様のせいです。

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

上の画像で言うと、青い線で囲んであるのがhタグやテーブルの範囲です。赤い線がベースライン。見てのとおり、アルファベットのpやgはベースラインよりも下にも文字があります。画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればよいわけですね。

スタイルシートで以下のように設定してください。

CSSコード

img {
   vertical-align:bottom
}

これで、画像の下から空白がなくなります。