タイポグラフィ（レイアウト）

line-height

1行の高さを指定する

value	description
`normal`	ブラウザが指定する初期値
`1.2`	`font-size`からの割合で指定する（この場合、`font-size`の 1.2 倍の高さとなる）
`20px`	px で指定する

Demo

ゴーシュは狸の子がどうするのかと思ってちらちらそっちを見ながら弾きはじめました。すると狸の子は棒をもってセロの駒の下のところを拍子をとってぽんぽん叩きはじめました。それがなかなかうまいので弾いているうちにゴーシュはこれは面白いぞと思いました。おしまいまでひいてしまうと狸の子はしばらく首をまげて考えました。

<div class="wrapper">
  <p class="style-1">
    ゴーシュは狸の子がどうするのかと思ってちらちらそっちを見ながら弾きはじめました。
    すると狸の子は棒をもってセロの駒の下のところを拍子をとってぽんぽん叩きはじめました。それがなかなかうまいので弾いているうちにゴーシュはこれは面白いぞと思いました。
    おしまいまでひいてしまうと狸の子はしばらく首をまげて考えました。
  </p>
  <p class="style-2">
    ゴーシュは狸の子がどうするのかと思ってちらちらそっちを見ながら弾きはじめました。
    すると狸の子は棒をもってセロの駒の下のところを拍子をとってぽんぽん叩きはじめました。それがなかなかうまいので弾いているうちにゴーシュはこれは面白いぞと思いました。
    おしまいまでひいてしまうと狸の子はしばらく首をまげて考えました。
  </p>
</div>

.style-1 {
  line-height: 1.5;
}
.style-2 {
  line-height: 2;
}
.wrapper {
  display: flex;
  font-size: 16px;
}

概要

行の高さを指定します。font-sizeより大きな値を指定することで、行間を広く取ることができます。

よく利用する値

数値（単位なし）、またはpxで指定する場合が多いです。

数値が指定された場合はfont-sizeからの倍率となります。 font-size: 16px;の場合にline-height: 1.5;を指定すれば、行高は16px × 1.5 = 24pxとなります。

px で指定された場合はその値が行の高さとなります。

line-height

Demo

概要

よく利用する値

関連

参照