ステージゼロワン★ラボ -STAGE01 Lab-|アメーバブログ -2ページ目

ステージゼロワン★ラボ -STAGE01 Lab-|アメーバブログ

アメブロをあなただけのオリジナルにカスタマイズします。
他の人と一緒じゃイヤ、私だけのオリジナルを!
~そんなあなただけのブログをつくります~

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

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

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

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

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

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

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


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