画像の下に謎の余白ができてしまうのを解決する方法【CSS】

下の例のように、画像の下に謎の余白ができてしまうのは、画像がインライン要素であることが原因です。

See the Pen
img-bottom1 by KUBO (@KUBOGEN)
on CodePen.

インライン要素の場合、高さは文字の大きさなどで決まりますし、縦の配置もデフォルトではベースラインになってしまうため、画像の下の余白をなくすには、「vertical-align」で下端揃えにする、もしくは「display」でブロック要素にします。

vertical-align:bottom;を指定する

See the Pen
img-bottom2 by KUBO (@KUBOGEN)
on CodePen.

画像をインライン要素のまま使いたい場合は、imgに「vertical-align:bottom;」を指定することで、下端揃えになり、余白もなくなります。

See the Pen
img-bottom3 by KUBO (@KUBOGEN)
on CodePen.

もう一つの方法は、「display:block;」を指定してブロック要素にする方法です。

この方法でも簡単に画像下の余白をなくすことができます。

「vertical-align:bottom;」を使う方法でも、「display:block;」を使う方法でもどちらでもいいと思うのですが、画像を親要素の中央に配置したい場合は注意が必要です。

例えば、「vertical-align:bottom;」を使っている場合、画像はインライン要素のため、親要素に「text-align:center;」を指定することで中央寄せができますが、ブロック要素には効きません。

なので「display:block;」を使っている場合は、ブロック要素の画像自体に「margin: 0 auto;」を指定する必要があります。