画像の下に隙間が出来るのはなぜ？

画像を配置する際に、なぜだか“画像の下に隙間”が出来てしまうことありませんか？

どういうことかと言うと、デモサンプルを確認してみてください。

DEMO

上の「デフォルトの配置」の画像下に背景色が見えてしまっているのがかわるかと思います。

このように、背景色を指定しているとスグに気が付きますが、白背景だとハッキリ言ってこの隙間に気が付かないこともあるんじゃないかな～と思いますが、これにはきちんとした原因があるみたいです。

理由を見てみると、まずは「img要素」はインライン要素です。CSSにおけるインライン要素の垂直位置を指定するデフォルトが「vertical-align:baseline;」になっていることが原因。上の画像で右側にテキストを配置した例を挙げていますが、このように「g」とか「p」とか下に突き出てしまうテキスト部分を考慮して、そこに下のラインを合わせているからなんですね・・・。

この解決方法は、img要素に対してデフォルトの「vertical-align:baseline;」ではなく「vertical-align:bottom;」を指定してあげればOKです。

デモサンプルを例に見てみると、以下のようになります。

HTML

CSS

デモサンプルの下の「vertical-align:bottomを指定」のように、画像下の隙間がなくなっているのが確認できるかと思います。

ちょっとしたことですが、あれ？隙間が・・・。ってなったら思い出してください。