如何在有序列表的项目之间添加空行？ [重复]

Question

这个问题在这里已有答案：

• How do I set vertical space between list items? 7个答案
• Spacing between bullet list rows 8个答案

我目前有以下HTML：

<ol>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

这产生了通常的结果：

1. 富
2. 酒吧
3. 基地

我想在每个列表项之间添加一个空行，以便输出如下所示：

1. 富
2. 酒吧
3. 基地

这可以通过在每个关闭<br>标签之前添加两个</li>标签来完成。然而，它是丑陋和不优雅的。

有没有更好的方法在HTML或CSS中实现相同的结果？

Answer 1

您可以根据自己的喜好增加每个li的边距或填充。例如。

li {
  margin-bottom: 1rem;
}

Answer 2

你在ol li添加填充

ol li{
padding:10px;
}

<ol>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

Answer 3

试试这个

.mylist> li{
  margin-bottom:15px;
}

<ol class="mylist">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

Answer 4

你可以尝试增加行高

li {
  line-height: 30px;
}

看看小提琴

https://jsfiddle.net/thanseeh/rh7vqL96/2/

Answer 5

您可以使用填充在每个项目之间添加一些空格

<ol class="myclass">
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
</ol>

.myclass li{
   padding-bottom: 20px;
}

.myclass li:last-child{
   padding-bottom: 0px;
}

Answer 6

您可以使用pre标签。不需要css

<ol>
  <pre>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    </pre>
</ol>