Question

在<ul>元素中，显然行之间的垂直间距可以使用line-height属性进行格式化。

我的问题是，在<ul>元素中，如何设置列表项之间的垂直间距？

Answer 1

您可以使用保证金。参见示例：

li{
  margin: 10px 0;
}

Answer 2

我倾向于这具有IE8支持的优点。

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

Answer 3

HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

编辑：如果你没有对最后一个li元素使用特殊情况，那么你的列表后面会有一个小间距，你可以在这里看到：http://jsfiddle.net/wQYw7/

现在将其与我的解决方案进行比较：http://jsfiddle.net/wQYw7/1/

当然这在旧浏览器中不起作用，但您可以轻松使用js扩展，这将为旧浏览器启用此功能。

Answer 4

在margin代码中添加li。这将在li之间创建空格，您可以使用line-height设置li标记内文本的间距。

Answer 5

旧问题，但我认为它没有答案。我会使用相邻的兄弟姐妹选择器。这样，我们只编写CSS的“一行”，并考虑了大多数答案缺少的结尾处或开头处的空间。

li + li {
  margin-top: 10px;
}

Answer 6

要应用到整个列表，请使用

ul.space_list li { margin-bottom: 1em; }

然后，在html中：

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>

Answer 7

许多时候产生HTML电子邮件爆炸时，您不能使用样式表或样式/ style块。所有CSS都需要内联。如果要调整项目符号之间的间距，请使用li style =“ margin-bottom：8px;”。在每个项目符号项中。自定义像素值。

Answer 8

使用伪类为每个列表设置padding-bottom是一种可行的方法。也可以使用线高。请记住，字体属性（如字体系列，字体粗细等）对于高度不均起着重要作用。

Answer 9

<br>行条目之间的

<li></li>似乎在我尝试过的所有网络浏览器中运行良好，但无法通过在线W3C CSS3检查程序。它精确地给出了我所追求的行间距。就我而言，由于它无疑是有效的，我坚持使用它，无论W3C说什么，直到有人能提出一个良好的法律选择。