ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

リストを縦に並べると隙間が空く場合の対処方法

July 07 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を変更するともちろんこれにも適用されてしまいます。

・・・・・と忘れない様に書いておくのでありました。

今日は七夕ですね。天の川を見たいなあと思いますが、あいにくの雨。
どっちにしても都会では全く見えないんですがね(笑)

| Posted in CSS, Web関連 | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jun 2017 July 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31