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

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

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

首先
第二

问题在于firefox中的默认列表样式在每个列表项之间留下了大量的空间，这与

标记中的段落之间的空间差不多。今天，我的谷歌fu被证明毫无用处——我如何减少垂直空间？我假设有一个css元素可以应用于

标记，但我似乎找不到任何东西

---

（这将进入页面的侧边导航元素，因此需要尽可能紧凑。）

减少或消除上下页边距和填充。例如：

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

---

PS：既然你使用的是Firefox，那就试试吧。当您在Firebug中单击HTML树中的元素时，它将突出显示页面本身上的元素。它将内容、边距和填充分别着色，以便您可以准确地看到边距和填充如何影响布局。

减少

上边距

、

下边距

以及

元素的填充：

li { margin: 1em 3em; padding: 0.2em; }

---

将

margin

和

padding

CSS属性设置为您想要的大小。为获得最大压实度，请使用：

ul, li { margin: 0; padding: 0; }

---

除了所有其他答案之外，还需要设置

行高：1em

以减少每行的前导空间。当然，

padding top

、

padding bottom

、

margin top

和

margin bottom

都是最有可能的罪魁祸首。

属性margin和padding是正确的方法

我想添加使用预定义的重置css文件重置完整css的建议，如Eric Meyer的建议：

---

在此之后，您可以选择控制更加指定的样式。

我遇到了这个问题

。当您在Firebug中单击HTML树中的元素时，它 将突出显示页面本身上的元素。它分别为内容、边距和填充>着色，这样您就可以确切地看到边距和填充对布局的影响

萤火虫没有填充物或边缘

当我更改显示属性时，间隙消失了

li { 
display: inline-block;
}

但是，产生了一个缺口：

li { 
display: block;
}

没有

ul{
字号：0；
}
ulli{
显示：内联；
字体大小：16px；
}

---

总是有用的

这些都不适合我

我有一个固定高度和宽度的未排序列表，它必须正好是带有填充和/或边距的列表元素的总和。实际上，9个列表元素必须放在一个3 x 3的正方形中

对我起作用的是

li{
    height: 144px;
    width: 144px;
    float: left;
}

---

啊哈！这是一个继承的线高度值，导致了我的问题。谢谢你，ricebowl！不要使用

padding

，因为它还会改变列表与列表上方和下方文本之间的距离，而

margin

如果值小于

1em

，则不会改变它，正如您在这里看到此解决方案的任何人所看到的那样，请记住，

行高度的值可以小于1才能正常工作。PS您可能不需要在标签内的所有位置添加填充和边距，您应该使用空白：正常