CSSで調整していると、画像(img)の部分に謎の余白が出現して、取れない時がある。
paddingもmarginも0にしているのに。
デベロッパーツールで確認しても、謎の空白。
これは、imgタグのデフォルトのスタイルが原因であることが多い。
imgタグはインライン要素で、
vertical-align: baseline;
がデフォルトで指定され、余白になっているパターン。
基本的に、瞬殺可能。
対処方法①
imgタグをブロック要素に指定すると消せる。
img { display: block; }
ただし、この場合は他に影響が及ぶ可能性があるので慎重に。
対処方法②
デフォルトの位置を下に揃えるよう指定。
img { vertical-align: bottom; }
こっちのほうが被害が少ないことが多く、おすすめ。