行の高さはテキスト文字やブラウザのレンダリングとどのように関係しますか?

行の高さはテキストに依存しますか文字?

<p>blah_blah</p></p>
<p><p><p>qypj;、</p></pre&gt ;</p><p>行の高さを 1 インチに設定する場合CSS の動作はブラウザによって異なる場合があります。 Firefox でレンダリングされたこの例は、最初の行にはアンダースコアが表示されないが、3 行目にはアンダースコアが表示されることを示しています。他のブラウザとスニペット ランナーでは、どちらの場合もアンダースコアが表示されます。</p><p><strong>どの動作が正しいですか?</strong></p><p>ブラウザやフォントが異なると、行の高さの計算に影響を与える可能性があります。これは line-height プロパティだけに依存しているわけではありません。</p><p><strong>文字で行の高さを変更できますか?</strong></p><p>いいえ、文字だけでは行の高さを変更できません。ただし、「p」、「g」、「j」などの特定の文字は、ベースラインよりも下に伸びて、行に必要な垂直方向のスペースに寄与する場合があります。</p><p><strong>行の高さの影響: 1</strong></p><p>line-height を 1 に設定しても、テキストが指定されたスペース内に収まるという保証はありません。ライン ボックスがフォントのサイズと正確に一致することを指定するだけです。</p><p><strong>コンテンツ エリアとライン ボックス</strong></p><p>フォントのプロパティはコンテンツ エリアを定義し、ライン ボックスはフォントのサイズを定義します。 -height は行ボックスを制御します。コンテンツ領域を制御することはできませんが、テキストに合わせて行ボックスを調整できます。</p><p><strong>例:</strong></p><p><pre class="brush:php;toolbar:false">span {<br> 背景: red;<br> カラー: #fff;<br> フォントサイズ: 20px;<br> フォントファミリー: monospace;<br>}</p><p>body {<br> margin: 10px 0;<br> border-top: 1px Solid;<br> border-bottom: 1px Solid;<br> アニメーション: 2 秒の線形変更無限代替;<br>}</p><p>@keyframes 変更 {<br> から{</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">line-height: 0.2

ログイン後にコピー

}

へ{

line-height: 2

}
}

なんとか<br></span>

この例では、スパンのコンテンツ領域は一定のままですが、ラインボックスは行の高さが変化すると伸縮します。これは、コンテンツ領域と行ボックスの独立した制御を示しています。

以上が行の高さはテキスト文字やブラウザのレンダリングとどのように関係しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。