btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

(X)HTML CSS

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

投稿日:

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

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

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

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

img {
	vertical-align: bottom;
}

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

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

雑記

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

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

魂は細部に宿る!







-(X)HTML, CSS
-, , ,

執筆者:


  1. 三角 より:

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

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例 …

no image

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なと …

no image

上付き(下付き)の設定は(X)HTMLタグかCSSか。

「m3」や「CO2」など、上付き・下付き文字を設定する場合にいつも悩みます。 上付き(下付き)にすることに意味があるような気がするので、(X)HTMLで問題ないとは思いつつ。 でもやっぱり見た目をコン …

no image

CSS のプロパティの書き順をちゃんと決めることにした。

「今さらかよ」という声が聞こえてきそうですが。 前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。 ようやく踏ん切りが付きました。 ので、自分はこういう順番で書きますよー、という宣言 …

no image

HTML 文字参照を探すのに Wikipedia はやっぱり便利だった。

Wikipedia には度々お世話になってます。 信頼性とかが問題になることもありますが、大体は大丈夫ですし、やはりあの圧倒的な情報量は魅力ですね。 で、(やっぱり)こんなものまであったのか! という …