【CSS】「em」で指定しているline-heightを「px」に変換する方法を調べてみた！

line-heightの変換ができない・・・

デザインの参考に他サイトをみて、フォントサイズや文字間・行間を真似したいのですが

ソースを見るとline-heightが〇〇pxではなく、「1.8」などと数値だけで表記されていますよね！

こちとらpxを知りたいのに・・・と何度思ったことか（泣）

ということで、今後スムーズに数値を変換できるように変換方法を調べてみました〜！

まずは基礎知識として・・・

行送りの数値（px）÷ フォントサイズ（px）

こちらの計算で簡単に数値を出すことができます！

例えば、「フォントサイズ：20px 、行送り：36px」の場合は、

行間の数値：36÷ フォントサイズ：20 ＝ 1.8 となるので、「line-height : 1.8 ;」と記述します。

基礎知識を学んだところで、気になっていたpxに変換する方法がこちら！

line-heightの数値 × フォントサイズ（px）

今回はline-heightの数値をpxに変換する方法を調べてみました！

他サイトのソースを見て参考にしようと思っても、IllustratorやPhotoshopのように全部px指定ではないことが多々ありますよね。

出くわすたびに「うーん」と頭を悩ませていたので、変換方法がわかってスッキリです（笑）

計算方法もいたってシンプルなので、助かりますね！