CSS line-height 行の高さを指定するサンプル

CSSのline-heightのサンプルです。

サンプル	line-heightプロパティ
	line-heightの値を1.5とした場合
	line-heightの値を2とした場合

line-heightプロパティ

line-height : 値

line-heightプロパティは、行の高さを指定します。

値	説明
normal	ブラウザが設定します。(初期値)
数値	数値*フォントサイズ=行の高さ値は子孫要素でも都度計算される。使用推奨です。
数値 + %	数値+% ☓ フォントサイズ=行の高さ値は子孫要素にも継承される
数値 + 単位	数値+単位 ☓ フォントサイズ=行の高さ値は子孫要素にも継承される
値を継承する

font-sizeが16pxでline-heightを1.5とした場合、1行の高さは24px(16*1.5)になります。
font-sizeの上下に4pxずつ追加されます。

line-heightのサンプルです。

line-heightの値を1.5とした場合

<style>
  .p1 {
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid #000;
    width: 200px;
    background: LightCyan;
  }
</style>
<p class="p1">line-height<br />
line-height</1.5>

行の高さは、line-height(1.5) * font-size(16) = 24pxになります。

line-heightの値を2とした場合

<style>
  .p1 {
    font-size: 16px;
    line-height: 2;
    border: 1px solid #000;
    width: 200px;
    background: LightCyan;
  }
</style>
<p class="p1">line-height<br />
line-height</1.5>

font-sizeが16でline-heightを2とした場合です。行の間隔が広がっています。

以下はMDNのline-heightプロパティのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/line-height