css - ライン高さのEM

Question

新しいウェブサイトをピクセルからemsに変換したいと思います。私の質問は、テキストのline-heightプロパティにもemsを適用する必要があるかどうかです。

Answer 1

「emsに変換する」とは、のem単位を使用することを意味すると仮定すると、フォントサイズにも適応するようにfont-size設定する必要があります。line-height2つのプロパティは密接に関連しており、一方をに設定しem、もう一方を（たとえば）pxまたはptに設定すると、フォントサイズを変更するとページが壊れます。したがって、本質的に接続されたプロパティに本質的に異なるユニットを使用することは、「emsを使用する」という考えそのものに反します。

たとえば、とを設定するfont-size: 1.5emとline-height: 18px、要素の親のフォントサイズに依存し、そのサイズが予想よりもはるかに小さいか、はるかに大きい場合、非常にうまくいかない可能性があります。

単位を使用するemか、純粋な数値を使用するかは別の問題です。のように数値だけを使用することは、主にのように単位line-height: 1.2を使用することと同じです。ただし、継承される場合、継承されるのは純粋な数値であり、計算値ではないという違いがあります。emline-height: 1.2emline-height

たとえば、内部要素のフォントサイズが親の2倍である場合、継承された値1.2は、それ自体のフォントサイズの1.2倍が使用されることを意味します。これは問題ありません。ただし、親がを持っている場合line-height: 1.2em、子は親のフォントサイズの1.2倍の値を継承します。これは、親のフォントサイズよりもはるかに小さい値です。

詳細な説明の終了例については、line-height @ MozillaDeveloperNetworkを参照してください。

Answer 2

line-height、で設定できpx、emすべてのユニットが適合します。

line-height係数/乗数を使用する場合、つまり単位ではなく、フォントサイズを乗算する数値のみを使用すると、最適かつ将来的に機能します。

.foo {
  font-size: 1.3em; /* based that 1em == 10px */
  line-height: 1.3; /* 16.9px line-height */
}

はい、あなたの質問に答えることができます。いいえ、すべきではありません。

ファクターベースの行の高さが将来の証明になるようにしてください。