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

middle。

最初に貼っているCodePenの実行結果のように 今回は vertical-align に top を設定しました。

インライン要素、あるいはテーブルセル要素の中で設定ができます， 無事隙間が埋まりましたね！ おまけ：vertical-alignってなんだ？ vertical-alignとは、行中においてテキストや画像の上下の揃え位置を指定するプロパティです， See the Pen erase-img-gaps by yukiwebcreate (@Yukiwebcreate) on CodePen. 解説１.うまくいかない理由 下の画像を見て分かる通り、画像と画像の間に隙間が空いてしまっています， 勉強になったわ ，。

bottom などがあります， imgタグで画像を並べただけやのになぜか隙間ができる！ こんなことを思った人がいるのではないでしょうか？ 特にHTMLCSSを勉強中の方がよく悩むところかも知れません， 今回はその理由と解決方法をご紹介します。

目次 【これで解決！】画像の隙間を埋める【imgタグ】 コードと結果を先にお見せします， baselineは初期値で、親要素のベースラインに揃えるという意味があります， よく使う値としては top， この原因は imgに対して vertical-align:baseline が設定されている為 です， 解説2.解決方法 結論としては vertical-align に baseline 以外にすることで解決 できます。