商品画像とかを並べる際に、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を変更するともちろんこれにも適用されてしまいます。

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

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