【line-height】行間の高さを設定

line-heightプロパティでは、行の高さ(インライン要素のボックスの高さ)を設定することができます。

例えば、インライン要素に対してline-heightを指定した場合は、そのボックスの高さを指定した事になり、ブロックレベル要素に対して設定した場合は、そこに含まれているインライン要素(テキストなど)のボックスの最小の高さを設定したことになります。

また行の高さにはマイナスの値は設定できません。

行間とline-heightの値の割振りについてですが、例えばfont-size:10px、line-height:16pxと指定すると下記の図のように文字の上下に、その差(line-heightの値からフォントサイズの値を引いた分)6pxの3pxずつが行間として文字の上下に割り振られます。

line-heightの値と行間の割振り

このようにフォントは垂直方向に中央揃えされていますので、line-heightの値からfont-sizeの値を差し引いた残りが、上下に半分づつ行間として導入されます。 仮にfont-sizeを10px、line-heightを5pxというように、行の高さがフォントサイズより小さい場合は、行間は詰められて(重なって)表示されるようになります。

またブラウザによってはline-heightプロパティの使い方次第で、印刷、または表示する際に思うようにならない場合がありますので注意して下さい。

書式

  • line-height : ……… 文字の行間を指定

★:normal、実数値のみ、数値+単位、パーセント、inherit

normal
ブラウザが自動で行の高さを設定します
実数値のみ
単位を付けずに数値のみで指定します。この場合、行の高さは、フォントサイズにその数値を掛けた値となります。例えばフォントサイズが10pxの時、1.5と指定すると行の高さは15pxとなり、emや%で指定した場合と同じになります。ですが、数値+単位、またはパーセント値+%で指定した場合は、その子要素にも計算結果の絶対値が継承されますが、数値のみで指定した場合は、相対値が継承されますので注意して下さい。なおマイナスの値は指定できません。
実数値+単位
数値にpx、emなどの単位を付けて行の高さを指定します。マイナスの値は指定することができません。
パーセント値+%
その要素のフォントサイズに対する割合で指定します。マイナスの値は指定できません。

使用した時の例

.sample1 {line-height: normal;}
.sample2 {line-height: 1.8;}
.sample3 {line-height: 14px;}
.sample4 {line-height: 200%;}
div {font-size: 14px;}
<div class="sample1">line-heightをnormalにした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう</div>
<div class="sample2">line-heightを1.8にした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう</div>
<div class="sample3">line-heightを14pxにした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう</div>
<div class="sample4">line-heightを200%にした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう</div>

ブラウザ上の表示例

line-heightをnormalにした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう
line-heightを1.8にした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう
line-heightを14pxにした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう
line-heightを200%にした場合の例です。行間は狭すぎても広すぎても読みづらいですが、人によって違うのでそれぞれ工夫しましょう

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / linebox
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~