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

Question

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

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

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

(这是在页面的侧面导航元素中,因此它需要尽可能紧凑.)

Answer 1

除了所有其他答案之外,可能值得设置line-height: 1em;以减少每条线的前导空间.当然,padding-top,padding-bottom,margin-top和margin-bottom都是最可能的罪魁祸首.

Answer 2

减少或消除顶部和底部边距和填充.例如:

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

PS:因为您使用的是Firefox,请尝试使用Firebug.当您在Firebug中单击HTML树中的元素时,它将突出显示页面本身上的元素.它分别对内容,边距和填充进行着色,以便您可以准确了解边距和填充对布局的影响.