减少 HTML <UL> 和 <LI> 元素之间的差距

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

提问by Vicky

I have below HTML in my web page:

我的网页中有以下 HTML：

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.

正如您在下面看到的，我完美地列出了项目，但是<UL>和<LI>元素之间存在固定的差距。

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

有没有办法，我可以缩小这个差距？即附加屏幕中“论坛”和“堆栈”文本之间的差距？

回答by kapa

The gap does not exist between ULand LIelements, but between the Forumtext and the ULelement. Most browsers define a default margin around certain elements, like the UL.

间隙不存在于UL和LI元素之间，而是存在于Forum文本和UL元素之间。大多数浏览器在某些元素周围定义了默认边距，例如UL.

You get rid of it with CSS:

你用 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:

或者如果你只是想减少它，例如这个将设置水平边距为 0，垂直边距为 5px：

ul { margin: 5px 0; }

回答by Sonhja

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.

如果你不“避免”它，那么在 HTML 代码中你就无法避免空格，比方说。看看这里。

回答by Andrew

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

除了 kapa 的评论之外，如果您为边距输入负值，它将减少差距。

In css:

在 CSS 中：

ul { margin:-20px;}

回答by Andrew

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.

这是它的外观。

回答by Jared

Yes, you can use CSS. In your CSS, specify the margin or padding properties to adjust the spacing between your LIand ULelements.

是的，您可以使用 CSS。在您的 CSS 中，指定边距或填充属性以调整您的LI和UL元素之间的间距。

LI { margin: 0px; }

LI { margin: 0px; }