CSSで画像の下の謎の余白を消す方法と原因

HTMLは誰が設計したのかたまに思うように動かないことがあります。

その1つとして画像の下に謎の余白が出来てしまう現象です。

画像自体も画像の周りの要素にも margin や padding は0を設定しています。

なので普通に考えたら余白なんか出来ないんです・・・

でも出来ちゃうから謎なんです。

 

今回はその画像の下に出来る謎の余白の原因と余白を消す方法についてお伝えします。

CSS1行で簡単に修正出来ます。

CSSで画像の下の謎の余白を消す方法

謎の余白というのは上の画像の赤枠のようなものです。

黒いメニューとぴったりくっついてほしいのに隙間が出来ています。

 

この解決策は2つあります。

下の2つの解決策はどちらを使っても構いませんが、その画像だけを特定してCSSを指定しないと他の場所で不具合が出たりしますので、セレクタには気をつけてください。

下詰めにして謎の余白を消す方法

vertical-align は縦の揃えを指定するプロパティです。

デフォルトは baseline が設定されており、そのせいで画像の下に余白が出来てしまいます。(詳細は後ほど)

この値に bottom を設定すると余白が消えます。

ちなみに top を設定しても余白が消えました・・・。baseline で無ければいいみたいです。

表示形式を変更して謎の余白を消す方法

display は表示形式を変更するプロパティです。

img タグ(画像)はインライン要素になり、そのため上で紹介した vertical-align : baseline の設定が適用され余白が出来てしまいます。

なのでそもそもの表示形式を変更してしまおうということです。

block を値に設定しブロック要素にすることで解決できます。

画像の下に謎の余白が出来る原因

画像はインライン要素になり、インライン要素はデフォルトで vertical-align : baseline の設定が適用されます。

ベースラインとは、下の画像の赤線の部分のことです。

画像の下端は赤線に合わせてしまうため下に余白が出来てしまいます。

なので下詰めにするか、表示形式をインラインからブロックに変更してしまうことで対応出来るということです。

まとめ

CSSで画像の下の謎の余白を消す方法と原因についてお伝えしました。

あまり使う場面は無いかもしれませんが、こういう問題があり解決策があるということだけでも覚えておくと良いです。

問題に直面したときにすぐに対策方法を調べることが出来るのはプログラマーにとって必須のスキルです。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

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

CAPTCHA