Reduce Gap between HTML <UL> and <LI> elements

问题

I have below HTML in my web page:

Forum
<ul>
<li> Stack</li>
<li> OverFlow</li>
</ul>

And as you could see below, I get the items listed perfectly, but there is a fixed gap between <UL> and <LI> elements.

Is there a way, I can reduce this gap? i.e. gap between "Forum" and "Stack" text in attached screen?

回答1:

The gap does not exist between UL and LI elements, but between the Forum text and the UL element. Most browsers define a default margin around certain elements, like the UL.

You get rid of it with CSS:

ul { margin: 0; }

or if you just want to reduce it, for example this one will set 0 margin for horizontal, 5px for vertical:

ul { margin: 5px 0; }

回答2:

Try this (don't know if it's the problem with you):

<ul><li>
your first li element </li><li>
your second li element</li>
</ul>

There are spaces that you can't avoid on HTML code if you don't "avoid" it, let's say. Take a look here.

回答3:

In addition to kapa's comment, if you enter a negative value for the margin it will reduce the gap.

In css:

ul { margin:-20px;}

回答4:

Yes, you can use CSS. In your CSS, specify the margin or padding properties to adjust the spacing between your LI and UL elements.

LI { margin: 0px; }

回答5:

This will decrease the vertical distance, but not the horizontal.

ul { margin:-15px 0;}

It is a combination of Andrew and kapa's.

Here's how it looks.

来源：https://stackoverflow.com/questions/5322288/reduce-gap-between-html-ul-and-li-elements