在简单的CSS模板上填充和边距问题

Question

这是我的代码：

http://jsfiddle.net/spadez/rAQYL/1/

我正在努力实现三件事，但我有点卡住了。

1. 删除“admin”下方的填充（您看到背后的绿色）
2. 删除列表上方的填充（在后面看到绿色的地方）
3. 在每个列表项的左侧添加1px空间（这样您就可以看到后面的绿色）。

因为我使用了这段代码，所以我不知道空间的来源：

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
}

然后，为了获得每个列表项之间的1px空间，我使用了这段代码，但它似乎不起作用：

#header ul li {
padding-left: 1px;
}

请问我的哪个地方出错？

Answer 1

您的额外空间来自此规则

#header h1, #header ul, #header ul li {
    ...
    background: white;
    padding: 5px 12px;
}

了解如何将填充应用于ul，然后再应用li内的ul s？它正在加起来。

同样的规则导致没有显示绿色背景，您将整个ul的背景设置为白色。

同时尝试将padding-left上的li转换为margin-left：

#header li{
    margin-left: 10px
}