画像の下の余白をなくす

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

画像の下に余白ができるのは、ブラウザによっても異なりますし、DOCTYPE宣言の違いによっても異なります。
そもそもこの余白って何なの?と言う感じですが、これは、画像をテキストのベースラインに揃えて表示されるからです。
画像とベースラインの関係
上の画像で言うと、青い線で囲んであるのがhタグやテーブルの範囲です。
赤い線がベースライン。
見てのとおり、アルファベットのpやgはベースラインよりも下にも文字があります。
画像の下に余白を作らないためには画像をベースラインに合わせずに一番下に合わせればよいわけですね。
スタイルシートで以下のように設定してください。

◎スタイルシート
img { vertical-align:bottom }

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

ホームページ作成に役立つコーナー