CSS: リスト（ul 要素）の間隔を調整するにはmarginを使う
CSS でリスト（ul 要素や ol 要素）の間隔を調整するには、 リストの li 要素に対してmargin を設定します。
リストの内容が全て１行で表示される場合は「line-height」でも調整可能ですが、 スマホなど表示幅の狭いデバイスによっては複数行にまたがる可能性もあるので、 「margin」で調整することをおすすめします。
リスト間隔調整のサンプル
「sample1」と「sample2」の２つのリストを表示します。 それぞれのリストに対して「margin-top」と「margin-bottom」を設定します。 2つのリストの行間が異なって表示されていることが確認できます。
sample1：行間 0 を指定
- リストA
- リストB
- リストC
- リストD
sample2: 行間 10px を指定
- リストA
- リストB
- リストC
- リストD
<ul id="sample1">
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
<li>リストD</li>
</ul>
<ul id="sample2">
<li>リストA</li>
<li>リストB</li>
<li>リストC</li>
<li>リストD</li>
</ul>
<style>
ul#sample1 li{
margin-top: 0;
margin-bottom: 0;
}
ul#sample2 li{
margin-top: 10px;
margin-bottom: 10px;
}
</style>