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.

转载请标明出处:Reduce Gap between HTML <UL> and <LI> elements

文章来源: Reduce Gap between HTML

and
• elements