`line-height` 行の間隔を変える

重要度5 / 5

意味

行と行のあいだを変えたいときに使います。単位なしの 1.7 は、その要素の文字サイズに対する割合です。文章は 1.6 から 1.8 くらいにすると読みやすいことが多いです。

見出しは文章より詰めます。font-size とセットで指定すると、画面幅が変わっても行間の比率が崩れにくいです。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<p>1行目です。行の間隔を広げると、文章が読みやすくなります。<br>2行目です。</p>

CSS

p {
  font-size: 1rem;
  line-height: 1.8;
}

プレビュー

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）