前回に続いてCSSの話です

今回はline-heightです
普段あまりつかわないのですが、意外な事実を発見したのでメモしておきます 
line-height: 1.5em;
とか
line-height: 150%;
は、その要素のフォントサイズの1.5倍が行の高さになります

ですが、単位なしの
line-height: 1.5;
は、 その要素のフォントサイズだけじゃなくて、その要素内の要素のフォントサイズも反映して1.5倍になります

説明しづらくてこれだけじゃ何言ってるのかよくわからないとおもうので、例を書きます

150%

<div style="font-size: 13px;line-height: 150%;"> あいうえお<br> <span style="font-size: 50px">かきくけこ</span><br> さしすせそ </div>
　　↓
あいうえお
かきくけこ
さしすせそ

1.5

<div style="font-size: 13px;line-height: 1.5;"> あいうえお<br> <span style="font-size: 50px">かきくけこ</span><br> さしすせそ </div>
　　↓
あいうえお
かきくけこ
さしすせそ

見ての通り、150%の方は内側の要素でフォントサイズが変わっても、150%と指定された要素のフォントサイズ×1.5 の高さで固定なので、「かきくけこ」がはみ出て 上の行と重なっています

1.5だと内側の要素でフォントサイズが変わると、そこの行の高さは変わったフォントサイズに合わせて1.5倍されるので「かきくけこ」の前後に十分隙間があります

%やemで指定する場合は フォントサイズを変える要素のスタイルとして、またline-heightを書く必要があります

この例だと

<span style="font-size: 50px">
↓
<span style="font-size: 50px;line-height: 150%">

ですね
 
フォントサイズ変えるごとに 毎回指定するのは大変なので、line-height使うときは単位なしで書くのがオススメです