IEで画像の上下にできる隙間の原因

上から下のブロックに画像のみでレイアウトしたところが、作ってみるとその上下のブロックとブロックの間に、数ピクセルほどの隙間が出てしまうのである。Firefox2（Win）・Chrome(Win)では問題ないのに、IE（Win）だと隙間ができてしまう。

「IE 画像 隙間」といったキーワードだったか、ヒントになるブログを発見。

それが「vertical-align」という記事である。

「画像(img)もインラインなのでそのままで使うとbaselineが適用されているので下がちょっと空く」

「画像の下にできる余白をつぶしたいのならimg{vertical-align:bottom;}とする」とあり、

設定してみると、解決！！！！

img要素がインライン、基本的に画像がブロック型をしているために忘れがちともいえる。

CSSの冒頭に
img { display:block; }