cssを組んでいて、画像の下に僅かな謎の空白ができる現象があったんですが、marginやpaddingを設定しても何をやってもなくならない…。
いろいろ調べていたら、たった1行で空白が消えたので忘備録的に残します。
img {
vertical-align: top;
}imgにこの1行を書いただけで消えました。
これ、画像は文字と同じインライン要素なので、高さの揃え位置の初期値がbaselineになっているのが原因。文字だと問題ないんですけど、画像だとちょっと浮いてる状態になるっぽいです。
なのでimgに対してのみbaseline以外の設定にしてあげれば謎の空白は消えます。つまり、値はtopじゃなくてもbaseline以外ならOK！