CSS】リスト(ul 要素)の行間を調整するにはmarginを使う

CSS でリスト(ul 要素や ol 要素)の行間を調整するには、 リストの li 要素に対して margin を設定します。

リストの内容が全て1行で表示される場合は「line-height」でも調整可能ですが、 表示幅の狭いデバイスによっては複数行にまたがる可能性もあるので、 「margin」で調整することをおすすめします。

リスト行間調整のサンプル

「sample1」と「sample2」の2つのリストを表示します。 それぞれのリストに対して「margin-top」と「margin-bottom」を設定します。 リストの行間が異なって表示されていることが確認できます。

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>