行の高さに単位をつけると子要素にどう継承されるか？

行の高さに単位をつけると子要素にどう継承されるか？

　行の高さを調節するLINE-HEIGHTプロパティの値に「em」や「％」等の単位をつけた場合とつけない場合で、その子要素に継承される行の高さの設定が異なります。

　以下のサンプルでは、左側の赤い枠■のボックスのLINE-HEIGHTプロパティに単位をつけ、右側の青い枠■のボックスのLINE-HEIGHTプロパティを単位なしに設定してあります。

単位をつけると親要素での計算結果が継承されてしまう！

　行の高さを調節するLINE-HEIGHTプロパティの値に「em」や「％」等の単位をつけると、その子要素に継承される行の高さは、親要素でピクセルに換算された計算結果となります。

　上のサンプル（赤い枠■）の場合、親要素「24px×1.5em」の計算結果である36ピクセルがすべての子要素に行の高さの値として継承されます。

　一方、LINE-HEIGHTプロパティの値に単位を使わない場合、その子要素に継承される行の高さは、「フォントに対する倍率」となります。

　上のサンプル（青い枠■）の場合、倍率「1.5」が子要素に継承され、フォントサイズが18pxの子要素では、「18px×1.5＝27px」が行の高さとなり、フォントサイズが12pxの子要素では、「12px×1.5＝18px」が行の高さとなります。