スマホサイトの画像を並べた時の下の隙間について

Question

いつもお世話になっております。

スマホサイトで、メニュー用の画像を並べているのですが、下に隙間ができてしまいます。
作り方を変えても隙間が消えないのですが、消す方法はありますでしょうか。

●テーブルに入れて作った場合
https://www.rakuten.ne.jp/gold/●●●/sp/category.html

●リストタグで作った場合
https://www.rakuten.ne.jp/gold/●●●/sp/ct_test.html###HR######IMG0aac0098077e0f57679838d826cf44903.jpegIMG0###

Answer

ECマスターズの田中です。

いずれも、画像の下端がベースラインの高さにあることが原因です。
下記ページをご覧いただくと、わかりやすいと思います。
http://www.coolwebwindow.com/csstips/help/000184.php

対策も、ページにある通り、
imgタグに「vertical-align:bottom;」を適用していただければ結構です。

imgタグ全てに適用すると、思わぬレイアウト崩れが
発生する可能性がありますのでご注意ください。
たとえば、「ct_test.html」で
.grid img { vertical-align:bottom; }
のように設定するなど、
必要な部分にだけ適用していただくことをオススメします。

Answer

ありがとうございます。
「vertical-align:bottom;」を設定した所、PCやスマキチでは隙間がなくなりました。

スマホ2台で確認した所、すき間が減りましたが、どうしても1pxくらいの隙間がまだあります。
下でなくて上に出るようになったようです。

スマホ特有のことなのかもしれませんが、これは仕方ないでしょうか？

Answer

ECマスターズの田中です。

画面の横幅に合わせて画像を自動で縮小した結果、
小数点単位で高さが設定されていることが原因なので、
修正するのは困難となっております。
万が一、改善できる方法が見つかりましたら、
改めてご案内させていただきます。

Answer

ありがとうございます。
やはり困難なんですね。隙間が目立たなくなったので大丈夫です。
もし見つかりましたらお願いいたします。