, 2014年5月7日

HTMLで画像を配置した時に、下側にmarginでもpaddingでもない謎の余白が現れる時があります。例えば以下のようなコードを書いた時、

h1{
    background-color: #ddd;
}
img{
    margin: 0;
    padding: 0;
}
<h1>
<img src="yurufuwa.jpg" alt="" width="100px">サイトのタイトル
</h1>

結果はこんな感じになります。画像のmarginとpaddingは0なのに、何故か謎の余白が現れてしまいます。

pic20140507-1

今回はこれを削除する方法を紹介します。

やり方

やり方はとても簡単。imgのCSSに1行追加するだけで削除できます。

img{
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

結果はこうなります。下側の余白が綺麗に消えていますね。

pic20140507-2

何故余白が現れるのか?

理由としては「テキストのベースラインに画像の下端が揃えられてしまうから」ということなのですが、詳しい話は「テキスト ベースライン」とかでググって下さい。

とりあえず、画像とテキストを並べる時は、画像のvertical-alignをbottomにするのがベストプラクティスかと思います。

CATEGORIES