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

在 CSS 中，列表可以通过一些属性进行自定义样式。其中，如何设置项目列表之间的垂直空间是一个常见的问题。

使用 margin 属性

一种常用的方式是使用 margin 属性。margin 是指元素周围的空白区域，包括上、右、下、左四个方向。我们可以通过为每个列表项设置 margin-bottom 属性，来设置它们之间的垂直间距。

li {
  margin-bottom: 10px;
}

在这个例子中，每个列表项之间的垂直间距被设置为 10 像素。

使用 padding 属性

除了使用 margin 属性外，还可以使用 padding 属性。padding 是指元素内部与边框之间的距离。我们可以为列表的父元素设置 padding 属性，来控制列表项之间的垂直间距。

ul {
  padding: 10px 0; /* 上边距和下边距均为 10 像素 */
}

在这个例子中，列表项的垂直间距被设置为 10 像素，其上下边距分别为 5 像素。

使用 line-height 属性

除了使用 margin 和 padding 属性，还可以使用 line-height 属性。line-height 是指行高，它会影响到元素内部的行间距，从而达到控制列表项之间的垂直间距的效果。

ul {
  line-height: 2; /* 行高为字体大小的两倍 */
}

在这个例子中，列表项的垂直间距被设置为字体大小的两倍。

总体而言，这些方法都是用来控制项目列表之间的垂直空间，选择适合自己的方法进行实现即可。

参考链接

• CSS margin 属性
• CSS padding 属性
• CSS line-height 属性