html - 简单 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
}