如何在有序列表的项目之间添加空白行？

Question

我目前有以下HTML：

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

产生通常的结果：

    
1. Foo
    
2. 酒吧
    
3. 巴兹

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

    
1. Foo
   
   
    
2. 酒吧
   
   
    
3. Baz
   
   

这可以通过在每个结束<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

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

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

Answer 6

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

<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;
}