画像の下に隙間が空く問題をCSS1行でなくす【10秒で解決】

Web制作をしていると、画像の下に謎の隙間がある問題にぶちあたることがあります。

ちょっと昔に僕もこの隙間をなくすために頑張って調べました。けっこう最初はぶちあたる問題だと思うので、わかりやすく解決方法をまとめたいと思います。

これが起きるのは、画像をdivタグなどで囲ってその親要素であるdivタグにスタイルを指定している時ですね。

以下は例です。隙間が空いているのがわかりやすいように、borderプロパティで赤い枠線を指定してます。

html

<div class="sample-box">
  <img src="./sample.jpg" alt="">
</div>

css

.sample-box {
  border: 1px solid #ff0000;
}

表示例

はい、なかなか無視できない隙間が空いていますね。
では、これをなくす解決法を2つ紹介します。

解決法1. img要素に`vertical-align: bottom;`を指定

vertical-align: bottom;をimg要素に指定します。
middleでもtopでも隙間はなくなりますが、bottomが無難かなと思います。

html

<div class="sample-box2">
  <img src="./sample.jpg" alt="">
</div>

css

.sample-box2 {
  border: 1px solid #ff0000;
}
.sample-box img {
  vertical-align: bottom; /*隙間をなくす指定*/
}

スタイル指定後の表示例

隙間はあとかたもなく消えました。

img要素にdisplay: blockを指定します。これだけです。

html

<div class="sample-box3">
  <img src="./sample.jpg" alt="">
</div>

css

.sample-box3 {
  border: 1px solid #ff0000;
}
.sample-box3 img {
  display: block;
}

スタイル指定後の表示例

画像を表示するimg要素はインライン要素です。
なので、テキストと同じ扱いになるんですね。

vertical-alignプロパティの初期値はbaselineになっています。これは英語のアルファベットのベースラインに揃えますよっていう指定です。
アルファベットを書く時、gやjが他のアルファベットより下に飛び出ますよね。その分の空白が与えられているために隙間が空いちゃっていたんです。

なのでdisplay: blockを指定してブロック要素にしてしまうか、vertical-alignでbottomやmiddleで上書きしてあげること隙間が消えるんですね。

スタイル1行で済む問題でした。
こういう空白は気になっちゃいますよね。空白を制する者はデザインを制す…はずです。

画像の下にできる隙間のなくし方