CSSで画像の下に隙間ができる原因と消す方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで画像の下に隙間ができる原因と消す方法について解説しています。意図しない余白がある場合の原因と対処法を、例を上げて説明します。検証と余白の削除を行う際の参考にしてみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSで画像の下に隙間ができる原因と消す方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

画像の下に隙間ができる原因と消す方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

隙間が生じる例を見てみよう

画像の下部の余白としてmargin-bottom、padding-bottomを設定しているわけでもなく、違和感のある隙間を確認できることが可能です。

初見は、全角スペースや半角スペースが表示されていることにも見受けられるものの、その一例を再現するために枠としてブロックレベル要素のdivタグとその子要素としてインライン要素のimgタグを定義しています。

ブロックレベル要素の高さが子要素の高さと一致しておらず、高さに差が生じているため、隙間を見つけることができます。

この隙間は、デベロッパーツールのエレメンツの項目(Google Chrome)、または、インスペクタの項目(Mozilla Firefox)で検証可能です。

 

隙間が生じる主な原因と対処法

原因

画像のimgタグに標準的なスタイルとして、vertical-align: baseline;が設定されており、この値が隙間を作り出しています。

ブラウザの標準的なスタイルシートとして、あらかじめ定義されてあることが多いため、デベロッパーツールでもこの値を確認することに対して困難でした。

この原因を特定する場合、ブラウザの標準的なスタイルシートを解体しなければわからないほどでした。

 

対処法

ブラウザの標準的な装飾を初期化するためのスタイルシートのreset.cssなどには、この設定の値を上端に整えて、隙間を埋めるための初期化のスタイルが定義されていません。

ブロックレベル要素の高さも、その子要素と同じ値として定義してから隙間を埋めることが可能です。

そして、本質的な原因となっているvertical-alignの値をbaselineからtopなどに変更することでも隙間を埋めることができるでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

実際に対処して隙間を消してみよう

インライン要素の画像に対してvertical-align: top;を設定します。

インライン要素のimgタグとその親要素であるdivタグの下部に生じた隙間が解消されました。

CSSに隙間が生まれた際には、vertical-alignの値を変化させて対応しましょう。

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

CSSで画像の下に隙間ができる原因と消す方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。