CSSのリストタグについて

質問

下記のソースのようにリストタグに画像を並べます。
ここまではいいのですが、firefoxなどブラウ上で文字サイズを大きくすると画像の上下に余白が出来てしまうのは何ででしょうか。。

<ul>
<li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li>
<li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li>
<li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li>
<li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li>
<li><a href="/"><img src="/" width="125" height="50" alt="" title="" /></a></li>
</ul>

あるサイトのソースを見るとliタグににfont-size:1px;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。
質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。

回答No.2

key-child · ベストアンサー

文字サイズ云々で余白がどうとかって言うことは、ある程度小さければ余白ができないって事ですよね？

<li><img></li>も<li>あああ</li>も同様に描画されるように期待されている。
li要素に高さ(heightプロパティ)を指定していなければ、内容の大きさによって高さは変化する。
が、内容が画像の場合、文字サイズの大きさに関わらず画像の大きさは一定である。
そのため、文字サイズを大きくすると余白ができているように見えるのでしょう。

なので、li要素に高さ(heightプロパティ)を指定し、はみ出した場合(overflowプロパティ)の設定を追加してやれば、文字サイズによって余白ができることは避けられると思われます。
が、その場合、画像が表示できない環境では代替文字(alt属性)が表示されるようになるが、それが見えない・見づらいなどの弊害が起こるかもしれない。

> font-size:1px;
これについては設定してもいい場合があるかもしれない。
内容としての価値がない画像や装飾目的の画像（本来はCSSで指定などが好ましいが）の場合、指定しても特に問題ないでしょう。

余談
文字サイズを大きくするとmarginやpaddingも大きくなるかもしれない。
それは文字サイズを基準(1emとか)に余白を取っているから、なので気になるなら書き換えを行う。

さらに余談
vertical-alignプロパティの初期値がbaselinenなので少し隙間が空いてるかも。

お礼

なるほど！
他のサイトのソースを色いろ見ていてheightプロパティの指定、overflowプロパティの設定をされているところが多くありました。key-childさんの説明のお陰でなぜそのような設定が必要なのかはじめてわかりました。ありがとうございます！
marginやpadding、vertical-alignの設定も注意します。
CSSは難しいですがやってて楽しいですね。

回答No.1

MochaBrown

ブロックレベル要素は分かりますか？
http://members.jcom.home.ne.jp/pctips/www/bandi.html
UlやPタグはブロックレベル要素なので、改行され、上下に余白が出来ます。
これをスタイルシートで0や好きな値にしてやればいいわけです。

たとえば、
ul {
margin: 0 0 0 0;
padding: 0;
}
このように指定してください。marginとpadding等の違いは、↓を参照してくださいね。
http://www.tagindex.com/stylesheet/box/margin.html

この辺が参考になりそうです。
http://www.tagindex.com/stylesheet/list/margin_padding.html
http://www.seiai.ed.jp/t2000/htm3/h08b01.html

余白をなくすためにfont-size:1pxにするのはどうかと思いますが…私ならしません。

http://ameblo.jp/css-memo/entry-10015208240.html
こんな記事も見つけました。

もし試してみてダメだったらごめんなさい＾＾；

お礼

ご丁寧にありがとうございます！
CSSをもっとちゃんと勉強しないとですね。。

>余白をなくすためにfont-size:1pxにするのはどうかと思いますが…私ならしません。
そうなんですよ。なんとなく気に入らないんです。。
もう少し自分で考えるようにします。すみませんでした。