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

【问题标题】：How do I reduce the vertical space between list items in an unordered list?如何减少无序列表中列表项之间的垂直空间？
【发布时间】：2010-11-18 18:48:05
【问题描述】：

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

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

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

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

【问题讨论】：

如果在

 标签内，你应该使用 white-space: normal

标签： html css

【解决方案1】：

对于所有其他答案，可能值得设置 line-height: 1em; 以减少每行的前导空间。当然，padding-top、padding-bottom、margin-top 和 margin-bottom 都是最有可能的罪魁祸首。

【讨论】：

啊哈！这是导致我的问题的继承的 line-height 值。谢谢，饭碗！
不要使用padding，因为它也会改变列表与列表上下文本之间的距离，而margin如果值小于@987654329则不会改变它@你可以在这里看到i.imgur.com/aB690Gb.gif
对于看到此解决方案的任何人，请记住 line-height 的值可能小于 1 才能正常工作。 PS你可能根本不需要填充和边距

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

将margin 和padding CSS 属性设置为您想要的任何大小。为了获得最大的紧凑性，请使用：

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

【讨论】：

【解决方案4】：

这些都不适合我。

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

对我有用的是放

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

【讨论】：

【解决方案5】：

像这样减少top-margin、bottom-margin 和<li> 元素的填充：

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

【讨论】：

【解决方案6】：

属性 margin 和 padding 是正确的方法。

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

在此之后，您可以选择更具体地控制您的样式。

【讨论】：

【解决方案7】：

ul {
    font-size: 0;
}
ul li {
    display: inline;
    font-size: 16px;
}

总是有效！

【讨论】：

【解决方案8】：

我遇到了这个问题

Firebug。当您在 Firebug 中单击 HTML 树中的元素时，它将突出显示页面本身的元素。它分别为内容、边距和内边距着色 > 以便您可以准确地看到边距和内边距如何影响您的布局。

Firebug 没有显示填充或边距。

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

li { 
display: inline-block;
}

但是产生了差距：

li { 
display: block;
}

没有。

【讨论】：