简单 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，然后在ul秒内应用于li？它正在加起来。

相同的规则负责不显示绿色背景，您将整个ul的背景设置为白色。

还可以尝试在li秒上追逐padding-left margin-left：

#header li{
    margin-left: 10px
}