css怎么设置li间距

什么是li间距

在HTML中，列表是一个非常常见的元素。如果用HTML标记一个列表，通常使用的是ul标签或ol标签。而这些标签下面也一般会拥有很多个li标签，每个li标签就代表一个列表项。

在很多情况下，我们需要控制每个li标签之间的距离。而这个距离就是我们所说的li间距。

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

使用margin属性设置li间距

最常见的设置li间距的方法就是利用CSS中的margin属性。

我们可以通过设置单个方向的margin值，从而来调整每个li标签之间的距离。例如，如果想要让每个li标签之间的距离是20像素，可以这样做：

li {
  margin-bottom: 20px;
}

上述代码会让每个li标签下方的空间增加20像素。

使用padding属性设置li间距

除了使用margin属性来设置li之间的距离，还可以使用padding属性。这种方法会增加每个li标签的内边距。

例如，如果想要让每个标签内部的距离是20像素，可以这样写：

li {
  padding-bottom: 20px;
}

上述代码会让每个li标签底部内边距增加20像素。

使用border属性设置li间距

最后，我们也可以借助CSS中的border属性，来实现设置li间距的效果。

例如，如果想要让每个li标签之间的距离是20像素，可以这样写：

li + li {
  border-top: 20px solid transparent;
}

上述代码会给每个li标签的上边框增加20像素的透明实线。

总结

通过margin、padding和border属性中的任意一种，我们都能很容易地调整li标签之间的距离，从而实现更加美观的网页设计效果。