Home > (X)HTML | CSS > リスト形式でマークアップした画像の下にできるすき間とその解決法。

リスト形式でマークアップした画像の下にできるすき間とその解決法。

[読了時間の目安:約 2 分]

よくぶつかる問題の割に忘れがちなので、メモ的エントリー。

画像を ul やら ol やらリスト形式でマークアップする機会って、結構多いんじゃないかと思います。
グローバルナビとか、写真のサムネイルとか。

そういうときにほぼ間違いなく出現するのが、画像の下の小さなすき間。
Firebug で確認すれば、それが li 内の問題であることはすぐ分かるのですが、いろいろ試してみても画像はなかなかピッタリくっついてはくれません。

そんなときは、とりあえず以下の設定を追加してください。

img {
	vertical-align: bottom;
}

これで大概のケースは解決します。
詳しいことはよくわかりませんが、ベースラインの調整をすることですき間が無くなるみたいなのです。

それでもダメなら、padding や line-height や font-size なんかを設定してみれば快方に向かうかも知れません。
意外と気付かないところで margin がかかってた、なんて笑えないこともあるので、まずはじっくり Firebug で確認・検証することをおすすめします。
(と、未来の自分へ書いてみる)

雑記

問題にしている「すき間」って、場合によっちゃ無視できるくらい些細なものなんですよね。
よほど目立つ状態でもない限り、大勢に影響を及ぼすことはほぼ無いですし。
でも、それを無視することによって生じる罪悪感といったら……。

こういうのがきっと「こだわり」なんだと言い聞かせて、誰も気付かないようなところをチマチマと手直ししてるワケです(←だからいつも時間がない)。

魂は細部に宿る!

Comments:1

三角 09-05-25 (月) 2:16

ありがとうございました。
眠い目をこすりながら、「寝なきゃ…寝なきゃ…」
と思いながら作業していたので、とても大変助かりました!

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://blog.btmup.com/xhtml/list-image-gap.html/trackback
Listed below are links to weblogs that reference
リスト形式でマークアップした画像の下にできるすき間とその解決法。 from btmup Blog

Home > (X)HTML | CSS > リスト形式でマークアップした画像の下にできるすき間とその解決法。

リンク
フィード
メタ情報

このページのトップへ