19

次のように、単位を指定せずに行の高さを使用している人を見ました。line-height: 1.5;

数字は何を表していますか？比率だと思いますので、emどうですか？

4

5 に答える 5

21

はい、比率です。1.5 は、要素のフォント サイズの 1.5 倍を意味します。したがって、1.5em または 150% と同じことを意味しますが、重要な例外が 1 つあります。継承では、純粋な数値が使用される場合、計算された値ではなく数値が継承されます。

したがって、フォント サイズが 24pt の要素がある場合はline-height: 1.5、行の高さを 36pt に設定します。しかし、要素に子要素 (内部要素) があり、フォント サイズが 10pt で、行の高さが設定されていない場合、子要素はline-height値 1.5 を継承します。これは、その要素が 15pt であることを意味します。一方、行の高さが1.5emまたは150%に設定されている場合、子は計算された 36pt の値を継承し、グロテスクな行間隔が作成されます。

技術的には、これは言う定式化の下に隠されています。値として使用される純粋な数値のline-height場合: 「計算された値は、指定された値と同じです。」したがって、名目上、子は「計算された」値 1.5 を継承し、これは子のコンテキストで解釈されます (フォント サイズの 1.5 倍) 。

于 2012-09-06T16:47:18.147 に答える
19

line-height@ Mozilla Developer Networkには、 line-heightCSS 仕様に比べて理解しやすい非常に優れた説明 (および例) があります。

line-height次のいずれかの方法で値を指定できます

line-height: normal | <number> | <length> | <percentage>

あなたの場合、次の<number>ように記述されているを使用しています。

使用される値は、この単位なし<number>に要素のフォント サイズを掛けたものです。計算された値は、指定された と同じ<number>です。ほとんどの場合、これは、継承の場合に予期しない結果を伴わずに line-height を設定するための推奨される方法です。

于 2012-09-06T15:22:50.553 に答える
2

それぞれの仕様 @W3Cを参照してください。

プロパティの使用値は、この数値に要素のフォント サイズを掛けたものです。負の値は不正です。計算値は指定値と同じです。

ご想像のとおり、これは比率であり、電流に関連していfont-sizeます。

于 2012-09-06T15:15:52.233 に答える
0

line-height: X;基本的にはline-height: (X*100)%;

line-height: 1;と同じですline-height: 100%;

同様に、

line-height: 1.5;と同じですline-height: 150%;

ここで、要素に現在設定されているフォントとサイズの行の高さの X% をline-height: X%;意味します。

たとえば、現在設定されているフォントとサイズによる要素の line-height が である場合、24pxそのline-height: 150%line-height になり36pxます。等々..

于 2012-09-06T15:20:15.683 に答える
0

rem現在のフォント サイズの代わりにルート em サイズを使用するために使用することもできます。

したがって、これらは両方とも現在の font-size の 2 倍の行の高さです

font-size: 2em;
font-size: 2;

しかし、これは ROOT フォント サイズの 2 倍の行の高さです

font-size: 2rem;
于 2014-09-14T16:38:33.607 に答える