floatしたボックス要素の中にimgタグで画像を読み込むと謎の空白が生まれる問題を解決する方法

HTMLのコーディングをしていて、画像を使ったグローバルナビゲーションを使いたいケースってよくあると思います。

そんなときは、リストタグをfloatで横並びにして、それぞれのリストの中にimgタグで画像を配置することになります。その時、横に並べたグローバルナビゲーションと
その下にある要素との間に、謎の空白が発生するという問題が発生しました。わかりやすく画像を使って説明すると以下の通りです。

こんな感じです。グローバルナビゲーションと、その下にあるボックス要素の間に白い隙間が発生しています。

さて、これの対処方法ですが、imgタグに、「vertical-align:bottom;」を追加するだけで直ります。

このようにすることで、画像の下に発生していた隙間をなくすことができます。

サンプルも用意しました!

ちょっとしたことなんですが、こういうのって厄介ですよね・・・
私も原因がわからなかったときは、ネガティブマージンで対処しようか、なんて思っていました。
同じ問題で苦しんでいる人がいましたら、ぜひお試しください。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

HTML | Posted on 2016/12/29 08:45

※コメントは管理人の承認後に公開されます。

コメントを残す

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