ホームページ制作

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

記事内に商品プロモーションを含む場合があります

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

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

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

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

li img {
    vertical-align: bottom;
}

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

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

===

コレカラウェブではWebライティングのお仕事を承っております。豊富な実務経験や国家資格を生かして、SEOに強い完全オリジナルな文章を作成いたします。公式noteにてポートフォリオを掲載していますので、こちらも併せてご覧ください。ご相談・ご依頼はお問い合わせページからお願いいたします!

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
らぐち
コレカラブログ管理人のらぐちです。コレカラウェブという屋号でフリーランスとして、Webライティング・SEOコンサルティング・メディア運営・障害者支援のお仕事を一貫して承ってきました。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。

COMMENT

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

CAPTCHA