css - 看似简单的 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;
}