こんにちは。

今回はHTMLで画像を使用する時のCSS設定方法をご紹介します。

画像を見出しタグ、ul や ol のリスト形式で
マークアップする機会って、結構多いと思います。
グローバルナビゲーションや写真のサムネイルなど。

そういうときに画像の下に小さな隙間が空くことがあります。
これはIE6.0でよく見られる現象です。

IEで画像の下に隙間が空くのは、IEで画像の元々の設定が
baselineになっているからです。

baselineというのは、アルファベット小文字のg j p yといった
通常のベースライン（下線）より下にはみ出る部分が
隙間となって現れる状態です。

CSSで画像の下の隙間を消すには
画像に対してbaselineの設定を別のものにしてあげればよいのです。

つまりは、topかbottom。

img {vertical-align: bottom;}

このように設定してあげれば画像の下の隙間は消えるはずです。

パソコンスクールISA渋谷校/INOUE