lineHeight や lineSpacing を px → em 表記に変更する

lineHeight や lineSpacing を px → em 表記に変更する

px / em / rem / % などの、さまざまな書き方があるが、em の指定値を算出する計算式を残しておく。

css を書く時、親要素では、px / % を使い、子要素で、em を使うことが多い。

変換をよくするline-height と line-spacing の変換式を記載する。

px → em 変換式

line-height の場合、 親要素が font-size: 16px で、行間を 24px で表示したい場合は、

行間 (24px) / フォントサイズ (16px) = 1.5 em の値となる。

line-spacing の場合、親要素が font-size: 24px で、文字間隔を 0.15px で表示したい場合は、

文字間隔 (0.15px) / フォントサイズ (16px) = 0.009 em の値となる。

em 指定の考え方

em は、親要素のサイズを元に、相対値を指定する。

たとえば、親要素が font-size:16px が指定されていて、
子要素に font-size: 0.5em を指定すると、font-size:8px で表示される。

Web技術カテゴリの最新記事