CSSは単位なしの行の高さメソッドを使用します

この記事では、CSSで単位を使用せずにline-heightを使用する方法を主に紹介します。これは、必要な友人に参照できるようにします。

字幕要素を継承できます。 line-height を繰り返し定義する必要はありません。通常、最後に単位を持ってきます (line-height:22px; や line-height:1.4em; など) が、line-height が問題を引き起こす場所は、継承と後から追加された単位でもあります

場合によっては、テキストの 1 行を垂直方向に中央揃えにするために、line-height に高さと同じ固定値を与えます。テキストの特定の段落の行間隔を調整するために、通常はパーセントまたはem 単位の相対寸法。おそらくそれは習慣なので、私たちは皆、行の高さに単位があることに慣れています。このような場合、行の高さの継承を考慮する必要はなく、問題は見つかりません。もちろん、行の高さの継承を使用すると、問題が見つかります。
たとえば、次のコード:

CSS:

<style> 
.line-height-test { width: 200px; line-height: 1.4em; font-size: 12px; } 
.line-height-test span { font-size: 30px; font-weight: bold; } 
</style>

HTML:

<p class="line-height-test"> 
<span>白培铭先生于1960年出生于中国台湾，毕业于中国台湾省清华大学核物理系，</span> 
之后留学于美国加州大学伯克利分校和密西根大学，获得双硕士学位。在工作之后，凭着对营销领域的浓厚兴趣，他又考入密执安大学深造。 
</p>

line-height 属性値に単位がある場合、継承される値は変換後の特定の px レベルの値になります (最初に計算してから継承します) ) ; 属性値に単位がない場合、ブラウザは計算された特定の値ではなく、この「係数（値）」を直接継承します。このとき、行の高さは独自の font-size 値に基づいて再計算されます。新しい行の高さの値 (最初に継承されてから計算されます)。

たとえば、p とサブ要素 p があります。p の行の高さは 150% であるため、p の特定の行の高さの値は 16px * 150% = に変換できます。このとき、p -height の行は 24px という変換後の値を継承するため、フォントサイズが line-height のサイズを超えるため、オーバーラップが発生します。他のユニットも原理は同じです。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS について 背景の使い方

CSSのtable-cell属性の使い方について

以上がCSSは単位なしの行の高さメソッドを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。