こんにちは！ゆずこです。
今回は、画像（img）を設置するときに遭遇する謎の隙間についてご説明します。
ずばりこれ
See the Pen
画像の下に隙間 by yuzuko (@yuyuyuzuko)
on CodePen.
左がそのままの状態。右が、今回の問題を分かりやすいように色付けした状態です。
背景を薄いグレー、画像を包むボックスを背景緑にしています。
画像が、画像を包む親要素ぴったりになっていないことがわかるでしょうか。
原因はvertical-align
vertical-align とは、いわゆる縦位置のことです。インライン要素に適用されます。
これの初期値は baseline です。
これが baseline です。アルファベットの下線部分、みたいな感じ。
gやyなどの、下が長い文字は、baselineより下まで突き抜けています。
画像も同じように、baseline揃えの状態。
これが上記のコードでの状態です。
一見下にそろっているように見えるんですが、突き抜けた部分が余白になってしまっています。
突き抜けた部分にそろえるには、 vertical-align: bottom を設定します。
bottom は↓の青い線の部分。
vertical-align: bottom; にすることで
このように、下にピッタリそろえることができます！
それ以外の対処法
そもそも画像をインライン要素ではなくブロック要素にしたらいいので、
display: block;
と書くことでも直ります。
私はなんとなくこっちのほうが好きです。
時々ある凡ミス
divタグでもpタグでもfigureタグでも、display: block; にしても vertical-align: bottom; 使っても隙間がある！！という場合
htmlの該当箇所に全角スペースが入っていませんか？？？
初心者が陥りやすい凡ミスなので騙されたと思ってチェックしてみてください。きっといます。
おつかれさまでした！！
