Html 如何减少无序列表中列表项之间的垂直空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1263074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I reduce the vertical space between list items in an unordered list?
提问by Electrons_Ahoy
I've got a very simple html unordered list:
我有一个非常简单的 html 无序列表：
<ul>
<li>First</li>
<li>Second</li>
</ul>
The problem is that the default styling for such a list in firefox leaves a lot of space between each list item - about the same as between paragraphs in a <p>tag. My google-fu is proving uncharacteristically useless today - how do I reduce that vertical space? I assume there's a css element I can apply to the <ul>tag, but I can't seem to find anything.
问题在于，firefox 中此类列表的默认样式在每个列表项之间留下了大量空间 - 与<p>标签中的段落之间的空间大致相同。我的 google-fu 今天一反常态地被证明毫无用处 - 如何减少垂直空间？我假设有一个 css 元素可以应用于<ul>标签，但我似乎找不到任何东西。
(This is going in the side navigation element of a page so it needs to be as compact as possible.)
（这是在页面的侧边导航元素中进行的，因此它需要尽可能紧凑。）
回答by David says reinstate Monica
Further to all the other answers, it might be worth setting line-height: 1em;to reduce the leading space of each line. Of course, the padding-top, padding-bottom, margin-topand margin-bottomare all the most-likely culprits.
除了所有其他答案之外，可能值得设置line-height: 1em;以减少每行的前导空间。当然padding-top，padding-bottom、margin-top和margin-bottom都是最有可能的罪魁祸首。
回答by Sander Marechal
Reduce or eliminate the top and bottom margins and paddings. E.g:
减少或消除顶部和底部边距和填充。例如：
li {
margin: 0;
padding: 0.2em;
}
PS: Since you are using Firefox, try Firebug. When you click on elements in the HTML tree in Firebug, it will highlight the element on the page itself. It colors the content, margin and padding separately so you can see exactly how margins and paddings affect your layout.
PS：由于您使用的是 Firefox，请尝试Firebug。当您在 Firebug 中单击 HTML 树中的元素时，它会在页面本身上突出显示该元素。它分别为内容、边距和内边距着色，因此您可以准确地看到边距和内边距如何影响您的布局。
回答by John Millikin
Set the marginand paddingCSS properties to whatever sizes you'd like. For maximum compactness, use:
将margin和paddingCSS 属性设置为您想要的任何大小。为了获得最大的紧凑性，请使用：
ul, li { margin: 0; padding: 0; }
回答by quasi
None of those worked for me.
这些都不适合我。
I had an unsorted list with a fixed height and width that had to be exactly the sum of the list elements with it's paddings and/or margins. Actually 9 list elements that had to be put in a square 3 x 3.
我有一个具有固定高度和宽度的未排序列表，它必须完全是带有填充和/或边距的列表元素的总和。实际上 9 个列表元素必须放在一个 3 x 3 的正方形中。
What worked for me is to put
对我有用的是把
li{
height: 144px;
width: 144px;
float: left;
}
回答by Andrew Moore
Reduce the top-margin, bottom-marginand padding of the <li>element as such:
像这样减少元素的top-margin,bottom-margin和填充<li>：
li { margin: 1em 3em; padding: 0.2em; }
回答by ChrisBenyamin
The properties margin and padding are the correct approach.
属性 margin 和 padding 是正确的方法。
I want to add the advice to reset your complete css with a predefined reset-css-file, like this one by Eric Meyer: Link
我想添加建议以使用预定义的 reset-css-file 重置您的完整 css，就像 Eric Meyer 的这个：链接
After this you have the option to control your styles more specified.
在此之后，您可以选择更具体地控制您的样式。
回答by Adrian Garner
I experienced this issue
我遇到过这个问题
Firebug. When you click on elements in the HTML tree in Firebug, it will highlight the element on the page itself. It colors the content, margin and padding > separately so you can see exactly how margins and paddings affect your layout.
萤火虫。当您在 Firebug 中单击 HTML 树中的元素时，它会在页面本身上突出显示该元素。它分别为内容、边距和填充 > 着色，以便您可以准确地看到边距和填充如何影响您的布局。
Firebug showed no padding or margin.
Firebug 显示没有填充或边距。
When I changed the display property, the gap disappeared.
当我更改显示属性时，差距消失了。
li {
display: inline-block;
}
Produced a gap, however:
然而产生了一个缺口：
li {
display: block;
}
did not.
没有。
回答by torrealbaruben
ul {
font-size: 0;
}
ul li {
display: inline;
font-size: 16px;
}
Always works!
总是有效！
