CSS記事 - 行の高さの計算方法（親要素と子要素）

ここでは、私が個人的に曖昧になりやすいと考える状況をいくつか紹介します。
HTMLの構造は次のとおりです。

<p>
     </p><p>
        测试行高
    </p>

親要素は数値であり、子要素は設定されていません

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

親要素は
子要素は
子要素が数値を継承することを示します親要素の表示設定は、親要素自身のフォントと同じです。サイズは

親要素のパーセンテージに関連し、子要素は設定されません

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

親要素の親は
子要素の子はです
子要素が、パーセンテージに基づいて計算された親要素の行の高さを継承することを示します。これは、親要素自体のフォント サイズと同じです。 無関係

関連します

ケース 1 と 2 の場合、line-height: inherit を子要素 child を作成し、同じパフォーマンスのケース 3 と 4 を導出します

ここでは、曖昧になりやすいと思われる状況をいくつか挙げます。
HTMLの構造は次のとおりです。

<p>
     </p><p>
        测试行高
    </p>

親要素は数値であり、子要素は設定されていません

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

親要素は
子要素は
子要素が数値を継承することを示します親要素の表示設定は、親要素自身のフォントと同じです。サイズは

親要素のパーセンテージに関連し、子要素は設定されません

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

親要素の親は
子要素の子はです
子要素が、パーセンテージに基づいて計算された親要素の行の高さを継承することを示します。これは、親要素自体のフォントサイズと同じです。 関連なし

その他の CSS 記事 - 行の高さの計算方法 (親要素と子要素）関連記事は、PHP 中国語 Web サイトにご注意ください。