看似简单的UL列表添加了额外的填充，无法弄清楚

Question

这是我的代码，一切看起来都没问题，但无论出于何种原因，LI都会在底部创建额外的填充。

我错过了什么？这是小提琴，http://jsfiddle.net/M8eRG/

<ul class="project-thumbs">
                <li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif"></li>
                <li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif"></li>

            </ul>


.project-thumbs {
    list-style-type:none;
    margin:0;
    padding:0;

}
.project-thumbs li{
    background:#cc3300;
}

Answer 1

默认情况下，图像不会显示为块元素，因此它们会“创建一条线”。您可以通过指定以下内容来更改该行为：

.project-thumbs li img
{
    display: block;
}

Answer 2

尝试将其放入li本身

.project-thumbs li{
    background:#cc3300;
    margin:0;
    padding:0;
}