Date： | 
Category：画像同士に隙間が！そんなときの処方箋。
画像を<ul>・<li>タグで並べて、いざブラウザで表示したら、左記のような隙間ができてしまった！
<ul>や<li>にも<img>にも、margin:0;とpadding:0;を効かせているし、念のため、<li>と<img>のheightも同じにしたのに、おかしい。
こんな場合に、CSSに記述すべきプロパティと値は、何なのでしょうか?
余白の原因は、<li>と<img>の垂直ラインのズレ。
imgはインライン要素です。
なので、画像が配置される垂直位置は、親要素（この場合は<li>）のベースラインになります。
で、このラインのズレが、結果として画像の下に余白を生み出しています。
そして、垂直ラインをそろえる、vertical-alignを<img>に指定をしてあげれば、余白が消えます。
画像の隙間を埋める、HTMLとCSSソース。
具体的なソースの例は、下記のとおりになります。
◆HTML
<ul>
<li><img src=”画像のパス/navi01.gif” alt=”navi01″ width=”●●” height=”●●” /></li>
<li><img src=”画像のパス/navi02.gif” alt=”navi02″ width=”●●” height=”●●” /></li>
<li><img src=”画像のパス/navi03.gif” alt=”navi03″ width=”●●” height=”●●” /></li>
</ul>
◆CSS
ul li {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li img {
vertical-align: bottom;
}
ポイントは、vertical-align: bottom;を指定することです。
超多機能でSEOに強い！ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード！最新技術が詰め込まれたWPテーマTHE THOR
