元素之间的差距

【问题标题】：Reduce Gap between HTML <UL> and <LI> elements减少 HTML <UL> 和 <LI> 元素之间的差距
【发布时间】：2011-07-16 09:21:17
【问题描述】：

我的网页中有以下 HTML：

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

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

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

【问题讨论】：

【解决方案1】：

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

你用 CSS 摆脱它：

ul { margin: 0; }

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

ul { margin: 5px 0; }

【讨论】：

【解决方案2】：

试试这个（不知道是不是你的问题）：

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

比方说，如果您不“避免”它，那么 HTML 代码中的一些空格是无法避免的。看看here。

【讨论】：

【解决方案3】：

除了kapa的注释之外，如果你输入一个负值的margin会缩小差距。

在css中：

ul { margin:-20px;}

【讨论】：

【解决方案4】：

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

LI { margin: 0px; }

【讨论】：

【解决方案5】：

这将减少垂直距离，但不会减少水平距离。

ul { margin:-15px 0;}

它是安德鲁和卡帕的组合。

【讨论】：