読者です 読者をやめる 読者になる 読者になる

じゃいぶろぐ

楽天、アマゾン、Yahooなどの販売代行、アプリ・システム開発をしているJIVEの日々

imgタグを連続して置くと間にスペースが空くcssバグの対処法

こんにちは。スタッフSです。

だんだん暑くなってまいりましたね。

自宅PCのファンも唸りを上げて回転しております。

掃除しないと…

 

今回は、特にランディングページを作っているとき、

いざhtml&cssで構築したときにぶつかりそうなバグの話です。

f:id:jivejp:20150616124949j:plain

 (こういうのですね、長いけど)

 

 <img>を連続して並べると謎のスペースが…

表題の通りなんですが…

ランディングページって基本画像の連続配置ですよね。

<img><img><img><img>……

 

そんなとき、特にマージン等を指定してないのに

ブラウザで見ると謎のスペースが空いていることがあります。

こんな感じで。

f:id:jivejp:20150616124944j:plain

 999円のところを分断して若干スペースが空いてますよね。

画像が長いと容量も大きくなりますし、

モールによっては、登録出来る画像に「縦○○px、横○○px以内」なんて制限もあったり。

なのでこういった感じで画像を分割することも多いと思います。

で、この表示だとちょっと…困りますよねー…

 

実はCSSのバグ?(厳密には違うけど…)

なので、結構ブラウザによって出たり出なかったりもします。

Firefoxだと出るけどChromeだと出ないとか)

 

cssでimg要素に以下のようにプロパティを足しましょう。

 

 img {

vertical-align: bottom;

}

 

このvertical-alignは

行のなかでのテキストや画像などの縦方向の揃え位置を指定する

ためのプロパティなのですが、

初期値は多くのブラウザではbaselineになっていることが多いそうです。

(gとかjとか、下にはみだすアルファベットのためにスペースを作る)

先に述べたブラウザ間の差異もこれが原因だと思います。

 

これでスッキリ解消!

ちなみにインライン要素なので、ブロック要素には効きません。

imgに指定してあげましょう。

 

www.jivejp.com

株式会社 JIVE
新潟県柏崎市四谷1-4-26 2F
TEL 0257-23-0010 FAX 0257-23-0030
Copyright ©JIVE All Rights Reserved.