CSS li列表，左起边距

Question

我不明白为什么我有左边缘：

CSS：

html, body {
    font-family:Myriad Pro, sans-serif;
    font-size:18px;
    color:#000;
    margin:0px;
    padding:0px;
    background: url('./images/background.png');
}

#container {
    width:890px;
    height:530px;
    margin:36px auto;
}

#userList {
    width:228px;
    height:355px;
    float:right;
    border:1px solid #cccccc;
}

.users li {
    list-style-type:none;
    background-color: #f2f2f2;
    width:100%;
    height:50px;
    border-bottom: 1px solid #cccccc;
}

HTML：

<div id="userList"><ul class="users"><li><img src="./pic/none.png">Piet van Meerdijk</li><li><img src="./pic/none.png">Henk v/d Wal</li></ul></div>

当我把margin-left：-40px;在CSS代码中，li项目现在位于左侧，但是我在右边有一个边距。为什么呢？

JSfiddle：http://jsfiddle.net/8Cwcy/

Answer 1

<ul>代码的padding自动为40px，因此您需要将其更改为0px：

ul {
    padding: 0px;
}

这适用于所有浏览器。

小提琴：http://jsfiddle.net/8Cwcy/3/

Answer 2

默认情况下，许多HTML元素在许多浏览器中都有自己的CSS规则，<ul>标记默认有填充。您需要设置填充：0px到de <ul>标记：

ul{
padding:0px;
}

http://jsfiddle.net/8Cwcy/1/

如果您想了解有关CSS重置规则的更多信息，请点击this链接。