【これで解決】なぜか空く画像の隙間を埋める【imgタグ】

こんなことを思った人がいるのではないでしょうか？

特にHTML&CSSを勉強中の方がよく悩むところかも知れません。

今回はその理由と解決方法をご紹介します。

【これで解決！】画像の隙間を埋める【imgタグ】

コードと結果を先にお見せします。

See the Pen erase-img-gaps by yukiwebcreate (@Yukiwebcreate) on CodePen.

解説１.うまくいかない理由

下の画像を見て分かる通り、画像と画像の間に隙間が空いてしまっています。

この原因はimgに対してvertical-align:baselineが設定されている為です。

解説2.解決方法

結論としてはvertical-alignにbaseline以外にすることで解決できます。

最初に貼っているCodePenの実行結果のように

今回はvertical-alignにtopを設定しました。

無事隙間が埋まりましたね！

おまけ：vertical-alignってなんだ？

vertical-alignとは、行中においてテキストや画像の上下の揃え位置を指定するプロパティです。

インライン要素、あるいはテーブルセル要素の中で設定ができます。

よく使う値としてはtop,middle,bottomなどがあります。

baselineは初期値で、親要素のベースラインに揃えるという意味があります。