【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;
}