CSSの行間を指定できるline-heightとは？

CSSのline-heightとは、行の高さを指定するプロパティです。行の高さは、フォントの高さを含めた高さとなり、あまりが余白として上下に配分されます。以下の図のように、指定した行の高さ-フォントの高さ=上下の余白となります。

構文

指定可能な値

1. 数値のみ
   数値のみを指定した場合、フォントサイズ×数値が列の高さに指定されます。
2. 単位あり
   em(フォントサイズの何倍か）や、px、ptなどの単位を用いて指定できます。
3. パーセント
   フォントサイズの何％かを指定できます。

1,2,3いずれにも、マイナス値を指定することはできません。  

line-heightを使った行間調整の書き方

line-heightを、いろいろな書き方で表現してみましょう。

例１ 数値のみで指定

サンプルコード

/* CSSファイルに記述します */
.sample_1a {
     line-height: 1.1;    /* 行間調整　高さを1.1倍にする */
}
.sample_1b{
     line-height: 2.0;    /* 行間調整　高さを2.0倍にする */
}
.boxtest {
     font-size: 12pt;
     border:1px solid;
     width:20em;
     padding:6pt;
     display: inline-block;
     vertical-align: top;
}

<!-- HTMLファイルに記述します -->
<div class="boxtest sample_1a">
line-height のテスト1.1です</br>
line-height のテスト1.1です</br>
line-height のテスト1.1です
</div>

<div class="boxtest sample_1b">
line-height のテスト2.0です</br>
line-height のテスト2.0です</br>
line-height のテスト2.0です
</div>

結果

例２ 単位で指定

サンプルコード

/* CSSファイルに記述します */
.sample_2a {
     line-height: 1.2em;    /* 行間調整　高さを1.2倍にする */
}
.sample_2b {
     line-height: 2.0em;    /* 行間調整　高さを2.0倍にする */
}
.boxtest {
     font-size: 12pt;
     border:1px solid;
     width:20em;
     padding:6pt;
     display: inline-block;
     vertical-align: top;
}

<!-- HTMLファイルに記述します -->
<div class="boxtest sample_2a">
line-height のテスト1.2emです</br>
line-height のテスト1.2emです</br>
line-height のテスト1.2emです
</div>

<div class="boxtest sample_2b">
line-height のテスト2.0emです</br>
line-height のテスト2.0emです</br>
line-height のテスト2.0emです
</div>

結果

例３ パーセントで指定

サンプルコード

/* CSSファイルに記述します */
.sample_3a {
     line-height: 90%;    /* 行間調整　高さを90%にする */
}
.sample_3b {
     line-height: 200%;    /* 行間調整　高さを200%にする */
}
.boxtest {
     font-size: 12pt;
     border:1px solid;
     width:20em;
     padding:6pt;
     display: inline-block;
     vertical-align: top;
}

<!-- HTMLファイルに記述します -->
<div class="boxtest sample_3a">
line-height のテスト90%です</br>
line-height のテスト90%です</br>
line-height のテスト90%です
</div>

<div class="boxtest sample_3b">
line-height のテスト200%です</br>
line-height のテスト200%です</br>
line-height のテスト200%です
</div>

結果

Tips (ステップアップの小ワザ)

• line-height: normal;という指定もできます。normalを指定すると、何も指定しないのと同じ結果になります。(ブラウザにもよりますが、1.2と同様になるものが多いようです）
• line-heightの指定は 例１の数値指定が望ましいとされています。その理由は、単位指定で行うと、以下のように優先的に採用されるフォントサイズが異なってしまい、意図しない表示となることがあるためです。

意図しない表示　サンプルコード

/* CSSファイルに記述します */
.box {
    width: 12em;
    display: inline-block;
    vertical-align: top;
    font-size: 15px;    /* box内のフォントは15pxにする */
}
h1 {
  font-size: 30px;    /* h1で囲まれた文字は30pxにする */
}
.green {
  line-height: 1.1;    /* 行間調整　高さを1.1倍にする */
  border: solid limegreen;
}
.red {
  line-height: 1.1em;    /* 行間調整　高さを1.1倍にする */
  border: solid red;
}
.orange {
  line-height: 110%;    /* 行間調整　高さを110%にする */
  border: solid orange;
}

<!-- HTMLファイルに記述します -->
<div class = "box green">
<h1>単位のあるline-heightを使うと意図しない結果になることがありますので注意</h1>
数値のみ指定
</div>
<div class = "box red">
<h1>単位のあるline-heightを使うと意図しない結果になることがありますので注意</h1>
単位あり指定(em)
</div>
<div class = "box orange">
<h1>単位のあるline-heightを使うと意図しない結果になることがありますので注意</h1>
単位あり指定(%)
</div>

このようになってしまいます。

Tips (ステップアップの小ワザ)

line-heightは、3つの指定方法がありますが、単位なし指定が推奨されていることを覚えておきましょう。テキストが読みやすくなり、Webサイト全体の印象もアップできるline-heightをぜひ使いこなしてください。

参考：Mozilla Foundation

まとめ