如何减少无序列表中列表项之间的垂直间距？

Question

我有一个非常简单的 html 无序列表：

 <ul>
<li>First</li>
<li>Second</li>
</ul>

问题是 firefox 中此类列表的默认样式在每个列表项之间留有很多空间 - 与 <p> 标记中的段落之间的空间大致相同。我的 google-fu 今天被证明异常无用 - 我该如何减少垂直空间？我假设有一个 css 元素我可以应用于 <ul> 标签，但我似乎找不到任何东西。

（这是在页面的侧面导航元素中进行的，因此它需要尽可能紧凑。）

原文由 Electrons_Ahoy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

除了所有其他答案，可能值得设置 line-height: 1em; 以减少每行的前导空间。 Of course, the padding-top , padding-bottom , margin-top and margin-bottom are all the most-likely culprits.

原文由 David Thomas 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

减少或消除顶部和底部的边距和填充。例如：

 li {
    margin: 0;
    padding: 0.2em;
}

PS：由于您使用的是 Firefox，请尝试 Firebug 。当您在 Firebug 中单击 HTML 树中的元素时，它会在页面本身上突出显示该元素。它分别为内容、边距和填充着色，因此您可以准确地看到边距和填充如何影响您的布局。

原文由 Sander Marechal 发布，翻译遵循 CC BY-SA 2.5 许可协议