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

Question

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?

Answer 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; }

Answer 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.

Answer 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;}

Answer 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; }

Answer 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.