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

HTML&CSS

imgタグで画像を並べただけなのに、なぜか隙間ができてしまう!!

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

特にHTML&CSSを勉強してしばらく経つ人や、または駆け出しのコーダーさんとかデザイナーさんがよく悩むところかも知れません。

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

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

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

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

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

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

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

解説2.解決方法

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

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

今回はvertical-aligntopを設定しました。

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

おまけ:vertical-alignってなんだ?

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

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

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

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

タイトルとURLをコピーしました