HTML中的li是列表項(xiàng)，它們通常用于有序列表或無(wú)序列表中。在設(shè)置列表項(xiàng)時(shí)，我們有時(shí)需要控制列表項(xiàng)之間的間距，以達(dá)到更好的視覺(jué)效果。下面我們來(lái)看一下如何設(shè)置li的間距。 首先，我們可以通過(guò)設(shè)置ul或ol的padding屬性來(lái)控制列表項(xiàng)與其容器之間的距離。例如，下面的代碼會(huì)將有序列表中的每個(gè)列表項(xiàng)與其容器之間的上下距離都設(shè)置為20像素：

<ol style="padding-top: 20px; padding-bottom: 20px;">
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>

如果我們想要控制列表項(xiàng)之間的間距，可以通過(guò)設(shè)置li元素的margin屬性來(lái)實(shí)現(xiàn)。例如，下面的代碼會(huì)將有序列表中的列表項(xiàng)之間的距離設(shè)置為30像素：

<ol>
<li style="margin-bottom: 30px;">列表項(xiàng)1</li>
<li style="margin-bottom: 30px;">列表項(xiàng)2</li>
<li style="margin-bottom: 30px;">列表項(xiàng)3</li>
</ol>

除了使用單個(gè)li元素的margin屬性來(lái)控制間距以外，我們還可以使用:nth-child偽類(lèi)選擇器來(lái)控制特定位置的列表項(xiàng)之間的間距。例如，下面的代碼會(huì)將有序列表中的第1個(gè)和第2個(gè)列表項(xiàng)之間的距離設(shè)置為20像素，第3個(gè)和第4個(gè)列表項(xiàng)之間的距離設(shè)置為30像素：

<ol>
<li style="margin-bottom: 20px;">列表項(xiàng)1</li>
<li style="margin-bottom: 20px;">列表項(xiàng)2</li>
<li style="margin-bottom: 30px;">列表項(xiàng)3</li>
<li style="margin-bottom: 30px;">列表項(xiàng)4</li>
</ol>
<style>
ol li:nth-child(1n+1) {
margin-bottom: 20px;
}
ol li:nth-child(1n+3) {
margin-bottom: 30px;
}
</style>

綜上所述，控制li元素的間距可以通過(guò)設(shè)置它們與其容器之間的padding屬性或設(shè)置它們之間的margin屬性來(lái)實(shí)現(xiàn)。使用:nth-child偽類(lèi)選擇器還可以更加精細(xì)地控制列表項(xiàng)之間的間距。