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

Question

This is my code:

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

I am trying to achieve three things but I am a bit stuck.

1. Remove padding below "admin" (where you see the green behind)
2. Remove padding above list (where you see the green behind)
3. Add a 1px space on the left of each list item (so you can see the green behind).

Since I used this code I dont know where the space is coming from:

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

Then to get the 1px space between each list item I used this code but it doesnt seem to work:

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

Can someone who me where I am going wrong please?

Answer 1

Your additional space is coming from this rule

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

See how you're applying padding to ul and then to li s within ul s too? It's adding up.

The same rule is responsible for no green background showing, you're setting the entire ul s background to white.

Also try chaning padding-left on li s to margin-left :

#header li{
    margin-left: 10px
}