商品画像とかを並べる際に、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を変更するともちろんこれにも適用されてしまいます。
・・・・・と忘れない様に書いておくのでありました。
今日は七夕ですね。天の川を見たいなあと思いますが、あいにくの雨。
どっちにしても都会では全く見えないんですがね(笑)
