html - 相対的な行の高さが継承される場合、それは要素のフォントサイズに相対的ではありません。なんで？そして、どうすればそれを相対的なものにすることができますか？

Question

すべての要素に対して、 font-sizeをline-height設定するグローバルリセットがあります。inherit

* {
  font-size:   inherit;
  line-height: iherit; }

についてhtmlは、明示的に定義します。

html {
  font-size:   16px;
  line-height: 1.25em; } /* 16×1.25 = 20 */

これは相対単位line-heightで設定されていることに注意してください。

についてh1は、異なるフォントサイズを定義します。

h1 {
  font-size: 4em; }

h1の親戚を継承することline-heightを期待してい1.25emます。結果の行の高さは80px（16×4×1.25）に等しくなります。

しかし実際には、h1のline-heightは等しいままです20px（これは、のと同じhtmlです：16×1.25 = 20）。

たとえば、次のHTMLがあります。

<p>foo<br>bar</p>
<h1>foo<br>bar</h1>

結果のスクリーンショット：

この問題を回避するには、継承するのと同じ値に明示的に等しいを定義する必要がありh1ますline-height。

h1 {
  font-size:   4em;
  line-height: 1.25em; }

その後、line-height正しくなります：

相対値が最初に絶対値に計算され、次に絶対値が継承されるように見えます。font-sizeまたは、要素のではなく、親のに関連して継承されている可能性がありfont-sizeます。

質問

score 12 · Accepted Answer

em行の高さの値を使用すると、行の高さの値が計算され、その計算値が子要素でも使用されます。

代わりに裸の数値を使用する場合、それは子要素の行の高さの計算に使用される比率です。

したがって、line-height:1.25;代わりに使用してくださいline-height:1.25em;

score 4 · Accepted Answer

line-heightは要素で計算され、を使用するとその要素が継承されますem。最初の例を調べると、行の高さの計算値が20px（16x1.25）であり、ではないことがわかり1.25emます。

計算されたスタイル

を使用できline-height:1.25、正しい要素で計算されます。