imgタグを連続して置くと間にスペースが空くcssバグの対処法
こんにちは。スタッフSです。
だんだん暑くなってまいりましたね。
自宅PCのファンも唸りを上げて回転しております。
掃除しないと…
今回は、特にランディングページを作っているとき、
いざhtml&cssで構築したときにぶつかりそうなバグの話です。
（こういうのですね、長いけど）
<img>を連続して並べると謎のスペースが…
表題の通りなんですが…
ランディングページって基本画像の連続配置ですよね。
<img><img><img><img>……
そんなとき、特にマージン等を指定してないのに
ブラウザで見ると謎のスペースが空いていることがあります。
こんな感じで。
999円のところを分断して若干スペースが空いてますよね。
画像が長いと容量も大きくなりますし、
モールによっては、登録出来る画像に「縦○○px、横○○px以内」なんて制限もあったり。
なのでこういった感じで画像を分割することも多いと思います。
で、この表示だとちょっと…困りますよねー…
実はCSSのバグ？（厳密には違うけど…）
なので、結構ブラウザによって出たり出なかったりもします。
cssでimg要素に以下のようにプロパティを足しましょう。
img {
vertical-align: bottom;
}
このvertical-alignは
「行のなかでのテキストや画像などの縦方向の揃え位置を指定する」
ためのプロパティなのですが、
初期値は多くのブラウザではbaselineになっていることが多いそうです。
（gとかjとか、下にはみだすアルファベットのためにスペースを作る）
先に述べたブラウザ間の差異もこれが原因だと思います。
これでスッキリ解消！
ちなみにインライン要素なので、ブロック要素には効きません。
imgに指定してあげましょう。
