line-heightプロパティ

プロパティline-heightは、 テキストの行間隔（行間）を設定します。

このプロパティは、一見行間の間隔を指定するように思えますが、実際にはテキストラインの高さを指定します。つまり、実際の行間の間隔は次のように計算されます：line-height - font-size = テキスト行間の距離。または逆に、line-height = font-size + テキスト行間の距離。

構文

cssセレクター {
  line-height: 値;
}

値

値には任意のサイズ単位を使用できます。 %で値を指定した場合、行間隔はフォントサイズに対するパーセンテージになります。

さらに、0より大きい任意の数値を値として設定できます。この場合、それはフォントサイズの乗数として扱われます。例えば、 font-sizeの値が20pxで、 line-heightが1.5の場合、 これはline-height: 30px（20px * 1.5 = 30px）と書くのと同じことです。

デフォルトでは、プロパティの値はnormalです。この場合、ブラウザーが自動的に行間隔を選択します。

例

この例では、テキスト行間の距離はline-height - font-size = 38px - 18px = 20pxになります：

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 35px;
  text-align: justify;
}

Результат:

例

間隔を25px - 18px = 7pxに縮めます：

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 25px;
  text-align: justify;
}

Результат:

例

この例では、テキスト行間の距離はline-height - font-size = 18px - 18px = 0px になります。行がほぼくっついてしまい（上の行の文字の下部が下の行の文字の上部に触れます）：

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 18px;
  text-align: justify;
}

Результат:

例

この例では、line-heightの値はフォントサイズに対する乗数1.5です。 したがって、line-heightはfont-size * 1.5 = 18px * 1.5 = 27pxと同等になります。実際の行間の距離はline-height - font-size = 27px - 18px = 9pxです：

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
}

Результат:

例

乗数を大きくします：

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 2.5;
  text-align: justify;
}

Результат:

例

line-heightをfont-sizeより小さくすると、行が完全に重なり合ってしまいます：

html<p>
  some long text
</p>

cssp {
  font-size: 18px;
  line-height: 13px;
  text-align: justify;
}

Результат: