プログラミング

HTMLでのコーディング時の画像の下の謎の隙間をこの記事で解決!

画像の下の余白をなんとかして埋めたい

 

HTMLとCSSでコーディングしている時に画像の下に謎の隙間ができる時がある

 

コーディングで苦しむ人
コーディングで苦しむ人

コーディングしてたら画像の下に微妙に隙間ができるけどどうやったら埋める事ができるんだろう?
誰か教えてくれないかな?

 

といった悩みに当サイト(数がく部)の管理人でありある医学部受験予備校の看板講師講師のuheiがお答えします。

2019年からWEB制作の仕事をする為の勉強をして2020年から企業のWEB部門で働いていますが他人のWEBページのコーディングを始めた時にとにかく想定してないトラブル続きで苦労しました 笑

↓のヘッダー画像の下に微妙に隙間ができた時は相当困りました。(金色の部分です)

画像の下の余白をどうにかしたい余白を分かりやすくするために背景色に金色を付けています。

 

画像(子要素)の高さは指定したけど親要素の高さは指定してないので画像の高さが親要素の高さになると思っていました。

こんな時はデベロッパーツールでpaddingかmarginを見つけて調節すれば上手くいくけど表示されない。

画像の下の余白をどうにかしたいpaddingとmarginの表示がないからこれが問題ではないと分かりました。

 

この時のコードは↓です。(CSSは画像に関係がある部分だけ載せます)

 

「もしかして親要素(.header)と子要素(img)の高さがそもそも違うのでは?それだったら親要素の高さをなくせば隙間がうまるんじゃ?」と思い親要素(.header)のCSSにline-height:0を加えました、↓です。

そしたら画像の下の隙間が無くなりました、↓です。

画像の下の余白をなんとかして埋めたい

しかしこれには問題があることにすぐに気がつきました。

今回はヘッダー画像の下に文言がないからいいですがある場合は「画面が崩れるのでは?」と思いました。

試しに画像の下に文言を入れました。

コードは↓です(imgタグの下にpタグを2つ入れてます)、CSSは同じです。

すると↓となりやはり画面が崩れました。

画像の下の余白をなんとかして埋めたい青色の枠の所が変になっています

 

だから「このやり方ではダメだ」と思いました。

ひたすらググった結果「原因はimgのvertical-alignがbaselineになっていて親要素の高さとimgの高さが一致してないからかな?と思いました。

だから親要素と子要素のvertical-alignの位置を揃えればいいのでbaseline以外にしてbottomにしました。

コードは↓です。(HTMLはpタグを消して最初の状態にしました)

そしたら画像の下の余白は埋まりました。

調べたらあっさり解決できたのでHTMLとCSSを今から勉強してハマった人の助けになれたら嬉しいです。

この記事を読んでいる人がコーディング初心者ならとりあえずコピペでいいです、勉強は慣れてから理屈を知るのでも問題ないので。

とりあえず解決はできるのですがこうなった原因はググって見つけることができませんでした。

画像を置いた時に今回の現象が起きたり起きなかったりする原因が分からないですが今回の現象が起きたらCSSを指定すれば解決できます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です