EMの線高さ

Question

新しいウェブサイトをピクセルからemに変換したいと考えています。私の質問は、私もテキストラインの高さのプロパティにemを適用する必要がありますか？

Answer 1

"emsへの変換"はfont-sizeのem単位を使用することを意味すると仮定して、line-heightをフォントサイズに合わせて設定する必要があります。 2つのプロパティは密接に関連していて、emに1つ、pxまたはptにもう1つのプロパティを設定すると、フォントサイズが変更されるとページが破損します。したがって、本質的に接続されたプロパティのために本質的に異なるユニットを使用するためには、 "emを使用する"というアイディアに反して動作します。

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

emユニットを使用するか純粋な番号を使用するかは別の問題です。 line-height: 1.2のような数字だけを使用すると、line-height: 1.2emのように、emユニットを使用することと主に同じです。しかし、line-heightが継承されたときには、継承された純粋な数値であり、計算された値ではありません。

たとえば、内部要素の親のフォントサイズが2倍の場合、継承された値1.2は、独自のフォントサイズの1.2倍が使用されていることを意味します。これはOKです。しかし、親にline-height: 1.2emがある場合、子は親のフォントサイズの1.2倍の値を継承します。これは、自分のフォントサイズよりもはるかに小さい値です。以上説明端例について

は、（継承の問題を防止するために）行の高さのための無単位数を使用することが推奨されるline-height @ Mozilla Developer Network

Answer 2

あなたはline-height:1.3 !important;

Answer 3

line-heightはpx、em年代に設定することができ、すべてのユニットが収まるように試すことができます。

line-heightは、因子/乗数を使用した場合、ユニットを意味するのではなく、フォントサイズを乗じた数値だけを使用する場合に最適です。

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

はい、あなたは、あなたに質問することはできません。いいえ、してはいけません。

は、将来の証拠になるように因子ベースの線高さになります。

Answer 4

参照します。計算された行の高さは、単位の値に要素のフォントサイズを掛けたとなります。

div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } 

単位のない値であることが好ましい理由の良い例がここで与えられる：

とても（例では、MozillaのCSSドキュメントから取られた）のような、font CSSショートカットを使用する方が便利かもしれPrefer unitless numbers for line-height values 。