HOME
HTML/CSS
垂直型リストで画像を並べた時の隙間を消す方法

垂直型リストで画像を並べた時の隙間を消す方法

画像をリストで並べた場合、画像の下に隙間が生じます。この隙間を消す方法。解決策は以下のとおり。

HTMLコード

 
<ul>
    <li><img src="/images/tips/list_img_space.jpg" alt="" /></li>
    <li><img src="/images/tips/list_img_space.jpg" alt="" /></li>
    <li><img src="/images/tips/list_img_space.jpg" alt="" /></li>
</ul>

CSSコード

 
ul {
    list-style-type: none;
}
 
li img {
    vertical-align: bottom;
}

→隙間を消したサンプル

リストの中のimgタグにvertical-align: bottom;を指定することで解決できます。vertical-align: top;でも構いません。リストで画像を並べる以外に、画像の下に隙間が発生することは多々ありますので、デフォルトCSS等にimg要素に対してvertical-align: bottom;を指定しておくことが得策でしょう。

date 2010.10.27