Web制作をしていると、画像の下に謎の隙間がある問題にぶちあたることがあります。
ちょっと昔に僕もこの隙間をなくすために頑張って調べました。けっこう最初はぶちあたる問題だと思うので、わかりやすく解決方法をまとめたいと思います。
これが起きるのは、画像をdivタグなどで囲ってその親要素であるdivタグにスタイルを指定している時ですね。
以下は例です。 隙間が空いているのがわかりやすいように、border
プロパティで赤い枠線を指定してます。
<div class="sample-box">
<img src="./sample.jpg" alt="">
</div>
.sample-box {
border: 1px solid #ff0000;
}

はい、なかなか無視できない隙間が空いていますね。
では、これをなくす解決法を2つ紹介します。
解決法1. img要素にvertical-align: bottom;
を指定
vertical-align: bottom;
をimg要素に指定します。
middle
でもtop
でも隙間はなくなりますが、bottom
が無難かなと思います。
<div class="sample-box2">
<img src="./sample.jpg" alt="">
</div>
.sample-box2 {
border: 1px solid #ff0000;
}
.sample-box img {
vertical-align: bottom; /*隙間をなくす指定*/
}

隙間はあとかたもなく消えました。
解決法2. img要素にdisplay:block
を指定
img要素にdisplay: block
を指定します。これだけです。
<div class="sample-box3">
<img src="./sample.jpg" alt="">
</div>
.sample-box3 {
border: 1px solid #ff0000;
}
.sample-box3 img {
display: block;
}

なぜ画像の下に隙間ができるのか
画像を表示するimg要素はインライン要素です。
なので、テキストと同じ扱いになるんですね。
vertical-align
プロパティの初期値はbaseline
になっています。これは英語のアルファベットのベースラインに揃えますよっていう指定です。
アルファベットを書く時、gやjが他のアルファベットより下に飛び出ますよね。その分の空白が与えられているために隙間が空いちゃっていたんです。
なのでdisplay: block
を指定してブロック要素にしてしまうか、vertical-align
でbottom
やmiddle
で上書きしてあげること隙間が消えるんですね。
まとめ
スタイル1行で済む問題でした。
こういう空白は気になっちゃいますよね。空白を制する者はデザインを制す…はずです。
画像の下にできる隙間のなくし方
- img要素に
vertical-align: bottom;
を指定する。 - img要素に
display: block;
を指定する。