目次
CSSで画像の余白を消す方法
CSSを使ってスタイリングしているとき、imgタグに余白が生じることがあります。paddingやmarginをすべて0に設定しても、この余白が消えない場合があります。デベロッパーツールで確認しても、正体不明の空白が残ることがありますね。
この問題の原因は、imgタグのデフォルトのスタイル設定であることが多いです。imgタグはデフォルトでインライン要素として扱われ、以下のスタイルが適用されています。
vertical-align: baseline;この設定が原因で、imgタグに余白が生じます。以下の方法で、この余白を取り除くことができます。
対処方法1: imgタグをブロック要素に変更する
imgタグをブロック要素に設定することで、余白を消すことができます。
img {
display: block;
}ただし、この方法では他のレイアウトに影響を与える可能性があるため、慎重に使用する必要があります。
対処方法2: デフォルトの位置を下に揃える
より安全な方法として、vertical-alignのプロパティをbottomに設定する方法があります。この方法では、他のスタイルに影響を与えるリスクが少なく、おすすめです。
img {
vertical-align: bottom;
}これらの対策を使えば、CSSで画像の余白問題を解決できるでしょう。
