【CSS】画像（imgタグ）の下にできる謎の余白を消す

困ったこと

<div>
  <img src="sample.svg" alt="" />
</div>

marginやpaddingを指定したわけでもないのに、画像下に余白が生まれることがあるのでこれを消したい。

解決法

上記のDOM構造である前提。

1. 画像にvertical-alignを指定

img {
  vertical-align: bottom;
}

top | middle | bottomのいずれかを指定すれば解決できる。

2. 画像にdisplay: blockを指定

img {
  display: block;
}

3. 親要素にline-height: 0を指定

div {
  line-height: 0;
}

4. 親要素にfont-size: 0を指定

div {
  font-size: 0;
}