How do I reduce the vertical space between list items in an unordered list?

Question

I've got a very simple html unordered list:

<ul>
<li>First</li>
<li>Second</li>
</ul>

The problem is that the default styling for such a list in firefox leaves a lot of space between each list item - about the same as between paragraphs in a <p> tag. My google-fu is proving uncharacteristically useless today - how do I reduce that vertical space? I assume there's a css element I can apply to the <ul> tag, but I can't seem to find anything.

(This is going in the side navigation element of a page so it needs to be as compact as possible.)

Answer 1

Reduce or eliminate the top and bottom margins and paddings. E.g:

li {
    margin: 0;
    padding: 0.2em;
}

PS: Since you are using Firefox, try Firebug. When you click on elements in the HTML tree in Firebug, it will highlight the element on the page itself. It colors the content, margin and padding separately so you can see exactly how margins and paddings affect your layout.

Answer 2

Reduce the top-margin, bottom-margin and padding of the <li> element as such:

li { margin: 1em 3em; padding: 0.2em; }

Answer 3

Set the margin and padding CSS properties to whatever sizes you'd like. For maximum compactness, use:

ul, li { margin: 0; padding: 0; }

Answer 4

Further to all the other answers, it might be worth setting line-height: 1em; to reduce the leading space of each line. Of course, the padding-top, padding-bottom, margin-top and margin-bottom are all the most-likely culprits.

Answer 5

The properties margin and padding are the correct approach.

I want to add the advice to reset your complete css with a predefined reset-css-file, like this one by Eric Meyer: Link

After this you have the option to control your styles more specified.

Answer 6

Thanks dude it worked Thats a million Tons