line-height

line-heightは、行の高さを指定するスタイルです。

解説

line-heightは行の高さを明示的に指定したい場合に使用します。
高さの指定方法には、数値で指定する方法、文字サイズに対する割合で指定する方法の２種類があります。

文字サイズよりも小さい高さを指定すると、下記の３番目のサンプルのように文字が重なって表示されます。

構文

構文は以下になります。

値

line-heightには以下の値が指定できます。

太字の値は初期値です。

サンプル

行の高さを30pxにする

.sample01{
  line-height:30px;
}

<p class="sample01">あいうえお<br>かきくけこ<br>さしすせそ</p>

行の高さを150%にする

.sample02{
  line-height:150%;
}

<p class="sample02">あいうえお<br>かきくけこ<br>さしすせそ</p>

行の高さを80%にする

.sample03{
  line-height:80%;
}

<p class="sample03">あいうえお<br>かきくけこ<br>さしすせそ</p>

備考

• 標準のサイズ（normal）の高さで良い場合は、line-heightを明示的に指定する必要はありません。

Tweet