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

スポンサーリンク

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

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

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

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

sample1:行間 0 を指定

sample2: 行間 10px を指定


<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>

役立ちツール

CSS 基本事項

CSS セレクタ

CSS テキスト・フォント

CSS 色・画像・背景

CSS ボックス

トランジション

リスト

テーブル

CSS レイアウト

CSS その他

用語

関連サイト