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

記事内に広告を含みます

パソ君

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

・なぜ余白できるの？

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

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

こんな感じで↓

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

ジト

すぐにできるよ！

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

この記事でわかること

img画像の下の余白を消す方法・原因

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

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

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

vertical-align: baseline;

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

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

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

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

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

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

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

vertical-align: middle;

vertical-align: bottom;

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

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

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

ジト

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

コーディング知識を
『チート級』に得れる教材を作成！