如何使用 CSS 设置项目列表之间的垂直空间？

在编写网页时，经常会使用项目列表（list）来展示一系列相关的内容。在这些列表中，我们可能希望调整项目列表之间的垂直间距，以改善页面的可读性和外观。在这篇文章中，我们将学习如何使用 CSS 来设置项目列表之间的垂直空间。

通常，项目列表是使用无序列表（unordered list，<ul>）或有序列表（ordered list，<ol>）标签来创建的。每个列表项则是使用列表项标签（list item，<li>）来创建的。我们可以使用 CSS 来调整列表项之间的垂直间距。

以下是一些常见的方法，可以使用 CSS 设置项目列表之间的垂直空间。

使用外边距（Margin）

外边距是指元素周围的空白空间。通过设置列表项的外边距，我们可以调整项目列表之间的垂直空间。可以使用 margin-top 或 margin-bottom 属性来设置上方或下方的外边距。

li {
  margin-bottom: 10px;
}

上面的示例代码将在每个列表项之间添加 10 像素的垂直间距。

使用内边距（Padding）

内边距是指元素内容和边界之间的空间。通过设置列表项的内边距，我们可以调整项目列表之间的垂直空间。可以使用 padding-top 或 padding-bottom 属性来设置上方或下方的内边距。

li {
  padding-bottom: 10px;
}

上面的示例代码将在每个列表项下方添加 10 像素的垂直间距。

使用边框（Border）

边框可以为元素提供额外的空间，并调整项目列表之间的垂直间距。可以使用 border-top 或 border-bottom 属性来设置上方或下方的边框。

li {
  border-bottom: 1px solid #ccc;
}

上面的示例代码将在每个列表项下方添加 1 像素的边框，从而在视觉上提供了垂直间距。

使用伪类选择器（Pseudo-class Selector）

还可以使用伪类选择器来选择特定位置的列表项，并对其应用样式。伪类选择器 nth-child() 可以选择第 n 个列表项，从而实现在指定的列表项之间添加垂直间距。

li:nth-child(n+2) {
  margin-top: 10px;
}

上面的示例代码将从第二个列表项开始，为每个列表项添加 10 像素的上方外边距，从而在每个列表项之间创建垂直间距。

综上所述，以上是几种常见的方法，可以使用 CSS 来设置项目列表之间的垂直空间。根据需要选择适当的方法，以获得期望的页面布局效果。