ある時、imgタグの下に余白が設定されていることに気づきました。
無意識のうちにmargin-bottomやpadding-bottomを指定しているのかな？と思い、確認しましたが、それらしい指定は見当たりませんでした。

気になったので調べてみると、実はimgタグにはデフォルトで画像の下に余白を付く指定がされているそうです。
今回の記事では、imgタグの下に生じるデフォルトの余白の原因と解決方法についてご紹介します。

imgタグの下に余白が出来る原因とは

imgタグは以下のように画像の下に余白が出来ます。
分かりやすくするためにグレーの背景を付けています。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

imgタグは、デフォルトでvertical-alignプロパティの値がmiddleになっているため、画像の下に余白が出来てしまいます。

imgタグの下に余白が出来る場合の解決方法

imgタグを使用して発生する余白を消す方法は2つあります。

vertical-alignプロパティをtop、middle、bottomにする

imgタグのvertical-alignプロパティの値をtop、middle、bottomのいずれかにすることで画像の下の余白が消えます。

まずはvertical-align: top;です。

img{
    vertical-align: top;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

続いてvertical-align: middle;です。

img{
    vertical-align: middle;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

最後にvertical-align: bottom;です。

img{
    vertical-align: bottom;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

displayプロパティをblockにする

imgタグのdisplayプロパティの値をblockにすることでも画像の下の余白は消えます。

img{
    display: block;
}

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

まとめ

いかがでしたか？
imgタグの下に出来る余白はCSSの指定で消すことが出来ることがわかりました。
より効率的なコーディングを実現するために、ぜひこのテクニックを活用してみてください。