浮动<li>包含图像的元素下面的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.