今の記事を見てくださっている方は、img要素を設置したとき、画像の下の余白を消せず困っていることでしょう。
なぜなら、これはpaddingやmargindをゼロにしても消えないからです。
でも安心してください。
vartical-alineを設定すれば秒で解決します。
解決コード
img{
vartical-aline :bottom(baseline以外ならOKです。)
}
たったこれだけです。
簡単でしょ？
実際に困ったケース
でも画像の下の余白を消すときって、一体どんな時でしょうか。
私はこんな時に困りました。
画像拡大のとき
画像をhoverした時、画像の大きさを変えず拡大させたい時です。
画像の大きさを変えない設定をしたのに、なぜか下方向にだけ画像が伸びるように拡大されてしまいます。
このとき、画像の下の余白の分だけ画像が伸びていたんですね。
vartical-aline: bottom を設定し、解決しました。
まとめ
みなさんも画像の下の余白に困ったら vartical-aline: bottom です。
こちらのサイトでわかりやすく書かれております。