- ベストアンサー
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;を指定されていました。コレでも解決するのですがこのやり方は良いのでしょうかね。。 質問の内容がわかりにくい時は「わかりにくい！」と言ってください。。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- MochaBrown
- ベストアンサー率60% (80/132)
ブロックレベル要素は分かりますか？ 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にするのはどうかと思いますが…私ならしません。 そうなんですよ。なんとなく気に入らないんです。。 もう少し自分で考えるようにします。すみませんでした。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
なるほど！ 他のサイトのソースを色いろ見ていてheightプロパティの指定、overflowプロパティの設定をされているところが多くありました。key-childさんの説明のお陰でなぜそのような設定が必要なのかはじめてわかりました。ありがとうございます！ marginやpadding、vertical-alignの設定も注意します。 CSSは難しいですがやってて楽しいですね。