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

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

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

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

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

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

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