【CSS】画像の下の余白(隙間)を消す方法【HTML】

要素にimgで画像を表示すると、下に余白が出来ていることがあります。

要素の高さを画像にピッタリにしたい場合など、困るケースもあると思います。

この余白が出来る原因と対応方法についてご紹介します。

何故余白が出来るのか

画像、すなわちimgタグは普通の文字と同じ「インライン要素」です。

そのため、高さはベースライン揃えとなり、高さの揃え位置の初期値は「vertical-align: baseline;」となります。
隙間が生じる理由は、画像をベースラインに揃えると若干浮くからです。

対策方法

画像の下に余白を出さない、2つの対策方法をご紹介します。

CSSのvertical-alignを変更する

CSSのvertical-alignをbaseline以外の値、「top」「middle」「bottom」など明確に揃え位置を設定することで隙間を消すことが出来ます。

img{
    vertical-align: top;
}

CSSでdisplay: blockにする

cssでimgタグをブロックレベル要素に変更することで、ベースラインの設定は参照されなくなり、隙間が生じなくなります。

img{
    display: block;
}

ただしブロックレベル要素に変更すると、text-align:centerなどの中央寄せが使えなくなります。

ブロックレベル要素を中央に寄せる場合は、「margin: 0 auto;」で対応しましょう。

img{
    display: block;
    margin: 0 auto;
}

右寄せにしたい場合は、「margin-left: auto;」で対応できます。

img{
    display: block;
    margin-left: auto;
}
以上、画像の下の余白(隙間)を消す方法、でした。

CSS