【CSS】画像の下に出来る余白を消す方法

サイトを作ってるときに画像の下に謎の余白が出来ていて、marginやpaddingをどうやっても消えてくれないということがありました。

解決策を見つけましたのでご紹介します。CSSに一行加えるだけの簡単な作業で済みます。

画像の下に出来る謎の余白を消す

まず、「画像の下に出来る謎の余白」とはなにか、こちらの画像をごらんください。

▼こちらが画像の下に出来た余白に何の対処もしてないものです。このように画像とその次の箱の間に隙間が出来て背景が見えてしまってます。

これを消すためには下記のように記述するだけでおっけーです。2パターン紹介します。

img {
  vertical-align: bottom;
}

img {
  display: block;
}

上記のいずれかをお使いください。

で、上記のまま書いちゃうと「そのサイト内のすべての画像が対象」になってしまうので、隙間が邪魔だと感じるときだけその場所を指定してあげるのがいいと思います。

<div class="contents-image">
<img src="画像のパス">
</div>

.contents-image img {
  vertical-align: bottom;
}

.contents-image img {
  display: block;
}

理屈についてはこちらの記事に詳しく書かれてますのでご覧ください。

最後に

知らなくてもなんとかなることが多かったため全く対処法など調べずにここまでやってきましたが、謎が解けて対処法も簡単で助かりました。

画像とテキストの位置が揃わないとお悩みの方はこちらの方法をお試しください。