画像（img）の下の謎の余白を消す方法を解説！
imgタグで画像を配置した際に、画像の下に謎の余白ができてしまうことがあります。謎の余白があることでデザイン通りにコーディングできないなどの弊害が出る恐れがあります。この記事では謎の余白ができてしまっている原因とこの余白を消す方法を紹介しています。
コンテンツ [表示]
画像の下の謎の余白を消したい
imgタグで画像を配置したときに、画像の下に謎の余白ができてしまっていることがあると思います。
謎の余白が何pxなのかも分からないし、この謎の隙間のせいでデザイン通りにコーディングすることができないと困った経験がある人も多いのではないでしょうか？
paddingやmarginも設定されていないのに、なぜこの余白ができてしまっているのでしょう。
この謎の余白の原因はimgタグはインライン要素であり、インライン要素のvertical-alignプロパティの初期値がbaselineであることです。
baselineが設定されているとimgタグとその親タグの間に隙間がない場合は、無理やり隙間を作り出しbaselineの設定を保とうとします。そのために謎の余白ができてしまっていたんですね。
画像の下の謎の余白を消す方法
それでは早速この余白を消す方法をサンプルコードを使って紹介しましょう。
余白ができる原因はインライン要素のimgタグのvertical-alignプロパティがbaselineになっていることでしたね。
解決方法は簡単でbaseline以外の値middleやbottomをvertical-alignプロパティに指定してあげるだけです。
画像の下の余白をなくすことができました。
imgタグがbaselineでなければならない場面はかなり少ないと思うので、imgタグには共通してvertical-alignプロパティにはbaseline以外の値を指定してあげていると毎回指定する手間が省け効率よくコーディングすることができるでしょう。
