［CSS覚書］imgにvertical-align:bottom;で微妙な画像の隙間をなくすときの記述方法に注意。
今回縦並びのヘッダーナビを画像をliタグで挟む形をとったのですが、
chromeで画像の間に微妙な空きができました。
<ul id="headernavi"> <li><a href="#"><img src="images/headernavi01.png"></a></li> <li><a href="#"><img src="images/custom/headernavi02.png"></a></li> <li><a href="#"><img src="images/headernavi03.png"></a></li> </ul>
おなじみのimgにvertical-align:bottom;を指定する方法をとったのですが、うまくいかないー(´・ω・`；)
原因は書き方にあったようで、imgの前にul、liタグを付けてしまうと
うまく反映されなかった。
× #headnavi ul li img
◯ #headnavi img
直接叱らないとダメと覚えよう(Ａ´Д｀；)