画像を縦に並べると出来る隙間に対処するCSS

更新日:2020年12月7日

画像を縦に並べようとimgタグを連発するものの、謎の隙間が出来て困っているという経験、WEB担当者なら誰もが一度は通る道ではないでしょうか?

ソースコード上で改行をすることによって隙間が出来ているに違いないと改行を削除するものの、隙間は埋まりません。
実はその悩み、たった1行のCSSで解決出来ます。

CSSは以下のように記述します。

img {
	vertical-align: bottom;
}

たったこれだけで解決。

CSSの最初にあらかじめ書いておく癖をつけててもいいかと思います。
お試しあれ!