【ホームページ作成】画像の下に謎の隙間ができるのを防ぐには

背景色を付けたボックス内に画像を配置した場合などで、画像の下側に、謎の余白が現れることがあります。 この余白は、なぜ現れるのでしょうか。また、この余白をなくすには、どうすればよいでしょうか？

ロゴ画像と背景色を組み合わせてヘッダを作りたいときや、複数の画像を組み合わせてデザインしたい場合など、 このような余白が空いてしまうと困りますね。
今回は、この「余計な余白」をなくす方法をご紹介致します。

謎の余白が空いてしまう例

画像の下部に謎の余白ができるのは、次のようなHTMLを表示させた場合です。

ブロックレベル要素の中に、画像を1つ入れています。
ブラウザによっては、余白が空かなかったり、余白が少しだけで確認しにくかったりします。 そんなブラウザでも、次のHTMLなら大きく余白が見えます。

このHTMLだと、下図のようにFirefoxで閲覧しても画像の下に余白ができてしまいます。

なぜ、画像の下に余白ができてしまうのか？

この画像の下の余白は、なぜできてしまうのでしょうか？
上記の、Firefoxの例がかなりのヒントになりますので、気づかれた方々も多いかもしれませんね。

謎の余白の原因と対策は次のページで >>