まえがき

コーディング作業中に画像の下に謎の余白ができることがあります。
その余白を消す方法のご紹介です。

画像の下に余白ができる状況1

いろいろあると思いますがKoToRiの場合、下記のコードで起こりました。

        <ul>
        	<li><img src="image.gif" alt="" /></li>
        </ul>

ブラウザで確認すると

こんな感じです。
謎ですね。
この場合、img要素に「vertical-align」を指定してあげれば無くなります。

li img{
	vertical-align:top;
}

このように指定すると余白が消えます。

画像の下に余白ができる状況2

上で紹介した事例ともう一つ画像の下に謎の余白ができる状況があります。

        <div><img src="image.gif" alt="" />aaa</div>

divの中に画像とテキストを直書きするとこうなります。

余白あいてますね～。
これも上で紹介したように「vertical-align」を指定すれば無くなりますが指定する値が「top」か「bottom」かによってテキストの入り方が違ってきます。

「vertical-align:top;」の場合

「vertical-align:bottom;」の場合

「vertical-align:middle;」の場合

状況によって使い分けてください。

まとめ

KoToRiも昔はこういうCSSの問題ですごく躓きました＞＜
こういうCSS関連のこともどんどん記事にしていきたいと思います。