html - 浮动下方的 4px 间隙包含图像的元素

Question

我有以下HTML：

<div class="container">
    <ul>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
    </ul>
    <div style="clear: both" />
</div>

我希望这些图像沿水平方向很好地串在一起，所以我应用了以下CSS：

div, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.container > ul li {
    float: left;
    background-color: yellow;
}

这行得通。<li>但是，由于某种原因，元素底部有 4px 的间隙。我知道这一点是因为我可以看到一小块黄色背景（就在底部，而不是一直在周围）。

你可以在这里看到一个例子：http: //jsfiddle.net/DBcPw/

注意：这似乎只在<li>元素包含图像时发生。如果我尝试使用<p>元素，则不会出现问题。

所以，我的两个问题是：

1. 为什么会这样？
2. 我能做些什么来修复它？

Answer 1

这是您的jsfiddle的更新

我补充说：

img{display:block; float:left;}

它消除了浏览器倾向于应用于图像的额外填充和边距，以给它们一些您可能不想要的间距。如果你想删除间距，请制作它们display :block，如果你希望它们并排放置，则制作图像float:left。

Answer 2

该<img>标签从您当前使用的字体中获取其间距，（取决于空白）因此设置font-size: 0;在<li>s 上就可以了。

li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0;
}

http://jsfiddle.net/Kyle_Sevenoaks/DBcPw/2/

Answer 3

的li高度应与 的高度相匹配img。

div.container > ul li {
    float: left;
    background-color: yellow;
    height: 30px;
}

工作示例 http://jsfiddle.net/DBcPw/6/