CSSを使用している際、画像(img)に予期せず余白が現れることがあります。この余白は、padding
やmargin
を0に設定しても消えないことがあります。原因は、imgタグがデフォルトでインライン要素として扱われ、vertical-align: baseline;
が指定されているためです。
この問題を解決する方法は以下の2つです。
1:imgタグをブロック要素に変更
img {
display: block;
}
この方法を使用する際は、他の要素への影響を考慮する必要があります。
2:デフォルトの位置を下に揃える
img {
vertical-align: bottom;
}
この方法は影響が少なく、推奨されています。以上の方法を試すことで、画像の余白問題を解決できます。