CSS顶部菜单栏

Question

I'm trying to create a top menu bar like in stackoverflow (but with fixed position).

JSFIDDLE Demo

There is a space on the left and at the top of the menu bar. How can I remove that space?

Thank you in advance...

Answer 1

By reseting margin & padding : http://jsfiddle.net/yw4e69qo/1/

Simply

html * {
    margin: 0;
    padding: 0;
}

But more comprehensively - dive deeper into this topic: http://meyerweb.com/eric/tools/css/reset/

It's very useful :)

Answer 2

body{
 margin:0;
 padding:0;
}

#nav{
margin:0
}

This will solve you problem without changing the menu postiton of menu items

Answer 3

#nav {
    padding:0;
    margin:0;

}

Answer 4

ul elements always have a default padding on the left side because of the list-style property. If you inspect the element in the console you can see exactly what is creating the margins you see. So simply putting the following will fix the problem for you:

#nav {
    margin: 0;
    padding: 0;
}

Also you should look into using a reset.css file so you don't have to do the resetting like this yourself on every list on your page. Using global selectors in your css like so:

ul {
    margin: 0;
    padding: 0;
}

to reset all elements is considered bad practice since it will slow down the execution of the code since it always have to check if the selector is part of the global selector. Hope this answer helps.