IEで画像の上下にできる隙間の原因 | ステージゼロワン★ラボ -STAGE01 Lab-|アメーバブログ

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

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


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

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

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

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

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

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

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


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

ハカセさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス