line-height_html/css_WEB-ITnose について話しましょう

このスタイルの行の高さは誰もがよく知っていると思います。テキストを上下に中央揃えするためによく使用されます。これは通常、問題を引き起こしませんが、この属性にあまり慣れていない場合は問題が発生する可能性があります。いくつかの落とし穴に足を踏み入れると、私は今日それを個人的にテストし、行の高さのいくつかの特徴をまとめました。

まず、line-heightには以下のような標準的な書き方があります:

書き方1, line-height:normal; / /line-height=font-size*1.5

書き方5. line-height: 1.5; 、図に示すように:

親要素が行の高さを設定し、子要素が行の高さを設定しない場合、子要素は line- を使用することがわかります。子要素の font-height に関係なく、親要素で設定された高さは、サイズがどんなに大きくても行の高さは変更されないため、子要素の font-size > 親要素の line-height, font の場合は、行の高さは変更されません。オーバーラップしたり、その他の不要なスタイルが表示されたりする可能性があります。

次に、書き方 4 と 5 は、以下に示すように同じように見えますが、異なります。

上記 2 つの書き方は、図に示すように、同じ効果が得られます。 :

今度は子要素のフォント サイズを 2 倍にします

行の高さはパーセンテージで設定されます、

line-height = 200%* 親要素 font-size = 32px

、子要素の行の高さは変わりません結果、フォントが重なります

数値で設定された行の高さにより、子要素の行の高さが再計算されます、

line-height=親要素の行の高さ比率*子要素のfont-size= 2*64=128px;

子要素の行の高さはRecalculateになります

以下の点をまとめると

Line-heightは継承されます。

要素がピクセル値 px または em に等しい line-height を設定すると、その子要素 ​​(行の高さが設定されていない子要素) は親要素の line-height を採用し、それ自体の line-height は変更されません。フォントサイズが大きいため、行が表示されます。

Line-height は、親要素の設定方法に基づいて、自身の行の高さを再計算するかどうかを決定します。つまり、書き方4と5の違いです ここまでで行の高さについてはある程度理解できたと思います