IE 画像 隙間 CSS

IEで画像の上下にできる謎の隙間｜ザピースカ
http://zap.hakox.net/index.php?e=387

IE7でも治ってないみたい。

そのデザインは、wrapという大きな枠の中に上からheaderblk・main・footerblkの順に、三層構造となっている（メニューと記事は mainの中で左右にfloat）。上と下のブロックはデザインのためだけのもので、画像のみだ。ところが、作ってみるとその上下のブロックとmainブロックの間に、数ピクセルほどの隙間が出てしまうのである。Firefox2（Win）では問題ないのに、IE6（Win）だとひっつかない。
　既に深夜になっていて意識朦朧としながら、検索しましたよ。もうネットが無いと大変なことだ。「IE 画像 隙間 CSS」といったキーワードだったか、ヒントになるブログを発見。それが「vertical-align」という記事である。「画像(img)もインラインなのでそのままで使うとbaselineが適用されているので下がちょっと空く」「画像の下にできる余白をつぶしたいのならimg{vertical-align:bottom;}とする」とあり、半信半疑で設定してみると、なんと解決！

　これは結構有名な話なのかもしれないが、検索してもすぐに見つかるというほどではなかったので、一応アップしておく。img要素がインラインだというのは、確かに手元の「スタイルシート辞典」でもそうなっているが、基本的に画像がブロック型をしているために忘れがちともいえる。画像の横並べをしないなら、CSSの冒頭にimg { display:block; }でもいいのかも。
　そう言われてみると、このブログのaboutのところにRSSアイコン画像を入れているが、これなどもIEとFirefoxでベースラインの揃い方が異なるので気になっていた。同じ原因かもしれないので、あとで試してみよう。どちらのレンダリングが正しい解釈なんだろう？