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

関連の記事

CSS color 文字の色を指定するサンプル
CSS font-family フォントを指定するサンプル
CSS text-align 文字を左寄せ/右寄せにする
CSS vertical-align 垂直の位置を指定するサンプル

△上に戻る