この記事を見ている方はおそらく、
img要素を設置した時、画像の下の余白を消せず、レイアウト調整に困ってしまっているのではないでしょうか。
なぜなら、これはpaddingやmargindをゼロにしても消えないからです。
解決方法は簡単です
img{
vartical-aline :bottom(baseline以外ならOKです。)
}
たったこれだです。
簡単でしょ？
実際に困ったケース
でも画像の下の余白を消すときって、一体どんな時でしょうか。
私はこんな時に困りました。
画像拡大のとき
画像をhoverした時、画像の大きさを変えず拡大させたい時です。
画像の大きさを変えない設定をしたのに、なぜか下方向にだけ画像が伸びるように拡大されてしまいます。
このとき、vartical-aline を設定し、解決しました。
ロゴとテキストの高さを揃えたいとき
Web制作において、ロゴ（image）とテキストを横並びにする機会は多々あると思います。
ですが、双方の高さが合いません。
そんな時、vartical-alineを設定すると高さを合わせることができます。
みなさんも画像の下の余白に困ったら是非試してください。
こちらのサイトでわかりやすく書かれております。