画像の下にすき間ができる
■問題
グローバルメニューなどをつくるとき、
画像を横並びにすると、下にすき間ができてしまう。
（リスト（li）にfloatをかけて横並び）
●回避
画像を下揃えにする。
------------------------------------
img{/*=== 画像下すき間回避 ===*/
vertical-align:bottom;
}
------------------------------------
アルファベットのベースラインが下にさがって
いることに関係しているよう…。
詳しくは調べてないです。
リストを横並びにする方法
CSSでリストを横一列にする2つの方法。
グローバルメニューで画像をならべたり、
フッターメニューなどに使える。
-------------------------------------
●リスト横並べ-1 floatを使う
ul {
list-style: none;
}
li {
float:left;
}
-------------------------------------
●リスト横並べ-2 inlineを使う
ul {
list-style: none;
}
li {
display:inline;
}
-------------------------------------
・関連：画像の下にすき間ができる
listをinlineで並べたときのすき間
■問題：リストでならべたときに、間があいてしまう。
リストをfloatではなく、inlineで横並びにしたときに、
終了タグの後に改行すると、すき間があいてしまう。
●回避-1
すべての改行しないで、詰めて記述すると、解決。
→この解決策だと、とてもソースは見にくいのが難点。
---------------------------------------------------
●回避-2
コメントを間に挿入する。
<ul>
<li><a href="">メニュー1</a></li><!--
--><li><a href="">メニュー2</a></li><!--
--><li><a href="">メニュー3</a></li>
</ul>
---------------------------------------------------
●回避-3
改行位置を変えてあげる。
<ul>
<li><a href="">メニュー1</a></li
><li><a href="">メニュー2</a></li
><li><a href="">メニュー3</a></li>
</ul>
---------------------------------------------------
・関連：画像の下にすき間ができる