ハナモゲラボ / 試行錯誤のPC人生
電脳の森に迷い込んだWebクリエイターのPCドタバタハナモゲラ日記です。
リストを縦に並べると隙間が空く場合の対処方法
July
7
2010
商品画像とかを並べる際に、liタグの中に入れて縦に並べたりしますが
その際に画像と画像の間に隙間が空いてしまいます。
<ul>
<li><img src="img/products/pdt01.jpg" alt="商品1" /></li>
<li><img src="img/products/pdt02.jpg" alt="商品2" /></li>
<li>img src="img/products/pdt03.jpg" alt="商品3" /></li>
</ul>
こんな感じのHTMLの時ですね。
その際、CSSでliの中のimgに対してvertical-alignをtopかbottomに設定すると
この隙間がなくなってくれます。
ul {list-style-type: none;}
li img {vertical-align: bottom;}この画像の「面倒な隙間」って他でもけっこうあるので
もう最初にimgに対して設定しておくのもよいかも知れませんね。
そもそもこれはインライン要素であるimgが「行間要素」を持つ事に
原因があるそうです。
line-heightを変更するともちろんこれにも適用されてしまいます。
・・・・・と忘れない様に書いておくのでありました。
今日は七夕ですね。天の川を見たいなあと思いますが、あいにくの雨。
どっちにしても都会では全く見えないんですがね(笑)
| Category: Web関連::CSS | Written at 07:47 PM | comments (0) | trackback (0) |
コメント
コメントする
この記事のトラックバックURL
トラックバック
My Profile
New Entries
- リストを縦に並べると隙間が空く場合の対処方法 (07/07)
- ワールドカップ2010！個人的なサッカー感。 (06/25)
- 広島県尾道市向島「ホテルとらふく」 (05/22)
- お久しぶりです・・・クーラーのお話 (05/07)
- FFFTPが1.97にバージョンアップしました。 (02/08)
- GumblarウィルスとContribute (01/16)
- HTML5のチュートリアル (12/21)
- Blogn+で写メール投稿画像がダブる (10/12)
- Gmail ManagerでGoogle Appsにログインできない (10/05)
- Dreamweaverのコードヒントをカスタマイズ (09/30)
Access Ranking
Recent Comments
- Dreamweaverでthタグを簡単に放り込む！
- DExposE2のFキー設定を変えるには
Recent Trackbacks
- SAVCEのアンインストールパスワード
- SleipnirでGeckoエンジンを使う。
- JQuery : マウスオーバーでフェード効果
- Dreamweaverで半角・全角変換コマンド
Categories
Archieves
Links
RSS Feeds
- RSS 1.0
- 処理時間 1.056262秒
Widgets
Contact to me
お問い合せはこちらから