CSS の行の高さの値 150% または 1.5 の違い

次のcss列では、line-height:150%とline-height:1.5の違いを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

(推奨チュートリアル: CSS ビデオ チュートリアル)

これはちょっとした何気ない質問ですが、よく言われることです。一部のインタビュアーによる。通常、突然混乱状態に陥りますが、何が違うのか見てみましょう。

最初に新しい HTML を作成します。コードは次のとおりです。

<p style="line-height:150%;font-size:16px;">
  　　　　　　　　 父元素内容
  　　　　　　　　
  <p style="font-size:30px;">
    　　　　　　　　Web前端开发<br/>
    　　　　 　　　line-height行高问题
    　　　　　　　　
  </p>
</p>

次の図は、親要素の行の高さが line-height:150% の場合の効果です。 150% の場合、親要素のフォント サイズに基づいて最初に計算され、次に子要素に継承されます。したがって、line-height:150% の場合、単語要素の行の高さは 16px * 150% = 24px になります:

下の図は line-height:1.5em の効果で、親要素の行の高さが 150% の場合、行の高さの値は親要素のフォント サイズに基づいて計算され、子要素が継承されます。それ。したがって、line-height:1.5em の場合、子要素の行の高さは 16px * 1.5em = 24px になります:

下の図は、 line-height:1.5 の効果として、親要素の行の高さが 1.5 の場合、子要素のフォント サイズに基づいて行の高さの値が動的に計算され、子要素が継承します。したがって、line-height:1.5 の場合、子要素の行の高さは 30px * 1.5 = 45px になります:

その他のプログラミング関連知識については、 プログラミング学習 Web サイト をご覧ください。 ！

以上がCSS の行の高さの値 150% または 1.5 の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。