[CSS] 行間(行の高さ)を指定するline-height

line-heightプロパティは、行の間隔を指定する際に使用します。行間を調整して長いテキストなどを読みやすい行簡に指定できます。

値には数値付きの単位を使います。行の高さには負の値を指定することはできません。

line-height: 値;
normal	ブラウザが定めた行間で(初期値)
数値(絶対値)	行の間隔を数値で表示する。単位：px、cm、mm、in、pc
数値(相対値)	基準となるフォントサイズに対しての相対サイズで指定する。単位：%、em、ex

ホームページでフォントサイズでよく使われる単位には「px」と「em」があります。まず「px」とは1ピクセルを1とする絶対単位です。

また「em(エム)」とは文字の高さを1とする単位で、MacやWindowsなどの使用している環境によって大きさが変わる相対単位です。

他に「ex」とは小文字の｢x｣の高さを1とする単位です。特にホームページにて「font-size」指定しない場合、デフォルトサイズは「1em=16px」になります。

パーセンテージ(%)で指定した場合は、100%と指定すると行の高さはフォントサイズの高さと同じになるため、行間隔「 0」になります。

行間を広げたい場合は100%以上または「1em」以上の値を指定します。

line-height :値;

 <style>
 .percentage {
  line-height : 80%;
 }
 .em {
  line-height : 0.6em;
 }
  </style>

上記のように、line-heightに「100%より小さい」値を指定した場合は、行間の高さがフォントサイズより小さくなってしまいますので行同士の一部が重なって表示されてしまします。例えばline-heightが10pxでfont-sizeが14pxなど、行の高さがフォントサイズより小さな値の場合には、行が重なって表示されます。

line-heightに「100%より小さい」値を指定した場合は、行間の高さがフォントサイズより小さくなってしまいますので行同士の一部が重なって表示されてしまします。

行間、行の高さとフォントサイズの関係では、 line-heightからfont-sizeを引いた数値が行間の値になります。例えば、上記のように、(line-height：20px) - （font-size：12px）=8pxが行間として上下均等に4pxずつ割り当てられます。

単位ごとの高さ表示

 <style>
 .normals {  line-height : normal; }
 .per {  line-height : 200%; }
 .no {  line-height : 1.5; }
 .pix {  line-height : 20px; }
  </style>