Menu
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.)
222
HTML allows one to reduce vertical space, using something like p { margin-top: -20px; } or such as shown in number of places on the net. For example how-to-reduce-the-space-between-p-tags.
The best way is using the HTML <span> element. Put the content into a <span>, and set the CSS position property to “relative” and also, add the left property to control the space.
You need to use display:block and float:left on the li s to remove the space. When they're inline the browser treats them as words, and so leaves space in between.
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
