はじめに
cssで長さを指定するとき、10pxみたいに絶対的な値を指定することもできますが、emやlhなどで相対的な値を指定することもできます。
相対的な長さを指定するための単位について整理してみます。
情報元はMDNのこのページです。
emとrem
結論から言うとemは「親要素のフォントサイズに対する相対値」で、remは「ルート要素(通常は<html>)のフォントサイズに対する相対値」です。remはroot emの意味。
具体的に言うと、1.3emは「親要素のフォントサイズの1.3倍」であり、0.9remは「ルート要素のフォントサイズの0.9倍」になります。
先程リンクを貼った情報元ページの『em と rem』にあるサンプルが分かりやすいので引用しますが、emでサイズを設定した要素が入れ子になっていると、ネストが深くなるたびに文字サイズが変わります。1.3emであれば、子は親の1.3倍、孫は子のさらに1.3倍、という具合です。
使い分け
emは親要素に対する相対値、つまり構造の影響を受けるので、あとあとHTMLの構造が変わったり入れ子が深くなったりした際に、当初の想定とは違うフォントサイズになってしまう可能性があります。
ページ全体のフォントサイズは決まっていて、特定の箇所では大きさを変えたい、みたいなシンプルな要件であればremの方が扱いやすいと思います。
余談: emの由来
emはもともと活字組版において使われていた長さの単位で、名前の由来は大文字の'M'のようです。昔はMが縦横いっぱい使っていたので、長さの単位になっていたのだとか。
lhとrlh
lhとrlhは行の高さを相対的に指定するための単位。lhは「要素そのものの行の高さに対する相対値」で、rlhは「ルート要素(通常は<html>)の行の高さに対する相対値」。'r'がついていればルート要素に対する相対値になるのはremと同じです。
つまり、1.5lhは「その要素の行の高さの1.5倍」であり、0.5rlhは「ルート要素の行の高さの0.5倍」ということです。
これもMDNのページの『行の高さの単位』にあるサンプルですが、こういうテキストの高さに関連する装飾で使えそうです。
余談: lhの由来
lhはシンプルにline-heightの略ですね。

