簡單的CSS模板上的填充和邊距問題

Question

這是我的代碼：

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

我正在努力實現三件事，但我有些困惑。

1. 刪除“管理員”下方的填充（您會在其中看到綠色）
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
}