画像を設置した時にできる隙間を無くす

img要素で表示した画像にわずかにできる隙間を消す方法を解説します。

この記事のポイント

画像の下に生じる隙間を解消する

画像の下に生じる隙間を解消する

画像はそのまま表示すると、勝手に余白が生じることがあります。

余白が分かりやすいよう、親要素に背景色でグレーを敷いています。

この余白を消すには、vertical-alignプロパティを指定します。

コード例

<style>
figure {
	display: inline-block;
	width: 300px;
	background-color: #999;
}

figure img {
	max-width: 100%;	
	vertical-align: bottom;
}
</style>
<figure><img src="./images/banner.png" alt="基礎から応用まで！HTML&CSS"></figure>

今回は値に「bottom」を指定していますが、「top」や「middle」でも大丈夫です。

もし今回のvertical-alignプロパティを使っても隙間が消えない場合は要素サイズが余分に大きい可能性があるため、line-heightプロパティを併せて指定してみてください。

コード例

figure img {
	max-width: 100%;	
	vertical-align: bottom;
	line-height: 1.0em;
}

改行による隙間を解消する

HTMLのimg要素やp要素にはフローコンテンツ、記述コンテンツ、セクショニングコンテンツなど、それぞれの要素が属する「カテゴリー」があります。
HTML4以前ではブロックレベル要素、インライン要素に分かれていました。
今でもCSSでは「display: block;」や「display: inline;」のように記述することがあると思います。

これらのカテゴリーのうち、フローコンテンツ（インライン要素）は記述したソースに改行がある場合、ブラウザで表示するとソースの改行がそのまま表示されてしまうため隙間ができてしまいます。
例えば、次のようなHTMLのソースを記述したとします。

コード例

<body>
<img src="images/pic.jpg" alt="サンプル画像 その1">
<img src="images/pic.jpg" alt="サンプル画像 その2">
<img src="images/pic.jpg" alt="サンプル画像 その3">
</body>

こちらのHTMLをそのまま表示すると、次のように画像と画像の間に隙間ができます。

この現象を回避するには、次の2通りの方法があります。

ソースの改行を削除する

1つ目の方法はCSSなどは使用せず、HTMLコードにある改行を直接削除することで隙間を非表示にします。
先述のコードであれば、次のようになります。

コード例

<body>
<img src="images/pic.jpg" alt="サンプル画像 その1"><img src="images/pic.jpg" alt="サンプル画像 その2"><img src="images/pic.jpg" alt="サンプル画像 その3">
</body>

改行を削除しただけですが、こちらのHTMLをブラウザに表示すると隙間は消えます。

非常に簡単な解決方法ではありますが、改行がなくなることでimg要素が連続していてやや見づらいソースになってしまう点がデメリットです。

display:block;を使う

2つ目の方法はHTMLは変更せず、CSSで解決します。
以下のサンプルコードは必要最低限の記述となるようhtml要素やtitle要素は省略しています。

コード例

<head>
<style>
img {
	float: left;
	display: block;
}
</style>
</head>
<body>
<img src="images/pic.jpg" alt="サンプル画像 その1">
<img src="images/pic.jpg" alt="サンプル画像 その2">
<img src="images/pic.jpg" alt="サンプル画像 その3">
</body>

img要素に「display: block;」を適用し、さらにfloatプロパティで横並びにしています。
ブラウザの表示は1つ目の方法と全く同じですが、2つ目の方法はHTMLコードが見やすいため、後々のメンテナンスなどにも影響を与えないため、どちらかというと2つ目の方法がオススメです。