imgを縦に並べると隙間が…

2006年07月03日

知ってました？

img画像をリスト（<li>）で縦に並べようとすると、微妙に隙間ができちゃう。
これを解除する方法なんですが。

imgのスタイルシートに
border:0;
ってやれば、Firefoxでは正常に隙間がなくなりました。

でも、この方法だと、IE6.0ではまだ隙間が･･･。

で、FirefoxでもIEでもちゃんと隙間なくimgを並べる方法。

実は意外と簡単で、
imgのスタイルシートに、

border:0;
vertical-align:top;

を加えてあげれば、なんと不思議。
両方のブラウザで隙間なく配置されます。

Macでも多分大丈夫です。

これで、img画像をリスト化してもキレイに表示されますね(^^ゞ

スポンサードリンク

パーマリンク
コメント (4)
トラックバック (0)

トラックバック

このエントリーのトラックバックURL:http://www.sriproot.net/mt/mt/mt-tb.cgi/98

こちらのブログを大変参考にさせてもらっております。今、通信教育でWEBを勉強しているのですが、ある程度、各ソフトの操作方法はわかるのですが、いざサイトを作るとなると、アイデアが浮かばず、いっこうに進みません。創造性にかなり欠けております。１０ヶ月ほどオンラインスクールで勉強しても、操作がわかっていても、サイトが作れないといった感じです。こういう場合は、向いてないのでしょうか？PCスクールで諦める方も多いのでしょうか？メールアドレスあてでもけっこうですので、返信よろしくお願いいたします。

はじめまして。
僕もはじめはそうでしたよ(^^ゞ
作ろう！と意気込んでも、どうしたらいいものか…。

いきなり作ろうとしても、効率が悪いので、『既存の会社のサイトをリニューアル』という題目で作ってみてはいかがでしょうか。

画像なども個人で使用するという目的であれば問題ないでしょうし。
車が好きならトヨタとかホンダとか。
食品が好きなら味の素とか日清とか。

そのサイトを見て自分がよくないと思うところをピックアップして、それらを修正したものを作り上げていくように考えると、進んでいきますよ(^^ゞ

そういうのに関連した記事を今度書いてみますので、期待せずにお待ちくださいな。

はじめまして。
実は仕事で悩んでいた箇所なので、たいへん助かりました！＞＜

ブラウザ間でのCSS解釈の違いって結構悩みますよね。
お役に立ててうれしいです(^^ゞ