画像の下にある余白をCSSで消す方法|margin・paddingなしでも余白がでる場合

HTMLのimgタグで画像を挿入した際に、margin・paddingをなしにしても画像下に余白ができる場合があるかもしれません。
今回は、その画像下の余白をCSSで消す方法となります。
画像の下にある余白をCSSで消す方法
imgタグで画像を挿入し、その画像をインライン要素とする場合、縦方向の揃え位置を指定できるvertical-alignプロパティのデフォルト値baselineが有効となります。
vertical-alignプロパティのbaselineは、要素の位置を親要素のベースラインに揃えますが、画像はベースラインを持たないため、画像の下端が親要素のベースラインに揃います。
そのため、画像の親要素によっては、画像の下に余白ができる場合があります。
そのような場合、画像の要素に対して、以下のようにvertical-align: bottom;を指定します。
img{
margin: 0;
padding: 0;
vertical-align: bottom;
}
vertical-align: bottom;では、画像の下部を行ボックスの下部に揃えます。それにより画像下部にできる余白がなくなります。
vertical-alignプロパティの値についての詳細は、以下のリンク先を参考にしてみてください。