画像の下に隙間ができる問題の原因と解決方法

HTMLでコーディング中に画像を配置すると、その画像の下に隙間ができることがあります。
背景が白であれば目立たないのでそのままでも問題ないのですが、背景に色を設定しているとデザイン的に問題となってきます。
そんな画像の下の隙間ができる原因と解決方法をご紹介します。

画像の下に隙間ができる原因

実際に画像を配置してみると、以下のように隙間ができていることがわかります。

原因ですが、画像（<img>）はインライン要素で、ベースラインを持たないため、その下端が親要素のベースラインに揃えられてしまうからです。

<div class="bg_gray1">
	<img src="image/sample.jpg" alt="サンプル" /><span>abcdefghijk</span>
</div>

上のサンプルソースで解説しますと、親要素が「div」となり、その要素のテキストや画像などの縦方向の揃え位置を指定する「vertical-align」デフォルトが「baseline」となります。
その為、画像は親要素のベースラインに揃えられてしまい、画像の下に隙間ができてしまいます。
下の画像はベースラインがわかりやすいように赤でラインを引いてみました。

隙間をなくす解決方法

今回は２種類の方法で、隙間のなくし方をご紹介します。

画像のvertical-alignを変更する

原因は上で説明した通りとなりますので、画像（<img>）の縦方向の揃え位置を指定する「vertical-align」の値を変更すれば問題は解決し、隙間はなくなります。

<div class="bg_gray2">
	<img src="image/sample.jpg" alt="サンプル" /><span>abcdefghijk</span>
</div>

.bg_gray2{
	background:#c0c0c0;
	margin-bottom:50px;
}

.bg_gray2 span{
	font-size: 20px;
	margin-left: 10px;
}

.bg_gray2 img{
	vertical-align:top;
	width:50%;
}

上のサンプルソースでは、「vertical-align:top;」に設定しています。
縦方向の揃え位置の値を「top」にしていますので、横のテキストは上に表示されます。
「bottom」「middle」 の場合も参考までに掲載しておきます。

画像をブロックレベル要素に変更する

画像がインライン要素の為に余白ができていましたので、画像の要素をブロックレベル要素にすることで隙間をなくすことができます。
画像の要素を変更するには「display」プロパティの値を変更します。

<div class="bg_gray5">
	<img src="image/sample.jpg" alt="サンプル" />
</div>

.bg_gray5{
	background:#c0c0c0;
	margin-bottom:50px;
}

.bg_gray5 img{
	display: block;
	width:50%;
}

上のサンプルソースでは画像の要素を「display: block;」としてブロックレベル要素に変更しています。

まとめ

２種類の方法をご紹介しましたが、「画像のvertical-alignを変更する」方法がオススメです。
「画像をブロックレベル要素に変更する」方法は画像をブロックレベル要素に変更していますので、テキストを上のサンプルのように書いても回り込んでしまい、テキストが画像の下に表示されてしまいます。
画像の横にテキストを表示しようとすると「float: left;」などで対応する必要があります。

最終的にはデザインの都合で方法を使い分けていただければと思います。