CSS知識メモ|imgのpaddingでもmarginでもない余白を消す方法

CSSで調整していると、画像(img)の部分に謎の余白が出現して、取れない時がある。

paddingもmarginも0にしているのに。
デベロッパーツールで確認しても、謎の空白。

これは、imgタグのデフォルトのスタイルが原因であることが多い。
imgタグはインライン要素で、

vertical-align: baseline;

がデフォルトで指定され、余白になっているパターン。
基本的に、瞬殺可能。

対処方法①

imgタグをブロック要素に指定すると消せる。

img {
  display: block;
}

ただし、この場合は他に影響が及ぶ可能性があるので慎重に。

対処方法②

デフォルトの位置を下に揃えるよう指定。

img {
  vertical-align: bottom;
}

こっちのほうが被害が少ないことが多く、おすすめ。