Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog よくぶつかる問題の割に忘れがちなので、メモ的エントリー。 画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。 グローバルナビとか、写真のサムネイルとか。 そういうときにほぼ間違いなく出現するのが、画像の下の小さなすき間。 Firebug で確認すれば、それが li 内の問題であることはすぐ分かるのですが、いろいろ試してみても画像はなかなかピッタリくっついてはくれません。 そんなときは、とりあえず以下の設定を追加してください。 img { vertical-align: bottom; } これで大概のケースは解決します。 詳しいことはよくわかりませんが、ベースラインの調整をすることですき間が無くなるみたいなのです。
![リスト形式でマークアップした画像の下にできるすき間とその解決法。](https://cdn-ak-scissors.b.st-hatena.com/image/square/859b014c559de062fde2855999c9a7e0c69e3537/height=288;version=1;width=512/https%3A%2F%2Fblog.btmup.com%2Fwp-content%2Fplugins%2Fwp-ogp%2Fdefault.jpg)