【解決】img画像の下の余白を消す方法・原因【CSS】

パソ君

・img画像の下の余白を消す方法は？

・なぜ余白できるの？

こんな疑問にお答えします。

img画像を反映させたときに、下余白ができたことありませんか？

こんな感じで↓

See the Pen 画像(img)の下に余白ができる➀ by jito-coder (@jito-coder) on CodePen.

実はこれ、あるコードを記述すれば一瞬で解決できます。

ジト

すぐにできるよ！

ということで、この記事では「img画像の下の余白を消す方法・原因」について解説していきます！

【解決】img画像の下の余白がでる原因【CSS】

結論：img画像下に余白できる原因は「インライン要素」＋「ベースライン配置」のため。

まずimgはインライン要素です。
そして「vertical-align: baseline;」が初期値になっています。

vertical-align: baseline;

ベースライン配置が、余白が生じる原因となります。

【解決】img画像の下の余白を消す方法【CSS】

つまりimg画像下の余白を消すには「インライン要素」もしくは「ベースライン配置」のいずれかを対策すればOKです。

そんな対策方法がこちら↓

➀：「display: block」を使う

See the Pen 画像(img)の下に余白ができる➁ by jito-coder (@jito-coder) on CodePen.

.box02 img {
    width: 50%;
    display: block;
}

「display: block」を使うことで、原因のインライン要素を対策することができます。

これで下余白がなくなりました。

➁：「vertical-align」の値を変更する

See the Pen 画像(img)の下に余白ができる➂ by jito-coder (@jito-coder) on CodePen.

// いずれかの値に変更する
vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

「vertical-align」の値を変更することで、ベースライン配置を対策することができます。

ちなみに値は「top」「middle」「bottom」いずれかでOKです。

これで画像下の余白がなくなりました。

【解決】img画像の下の余白を消す方法・原因【CSS】：まとめ

ジト

画像の下の余白を消したい時はためしてみてね！