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 fix开发者_运维问答ed 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?

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

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.

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

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

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.