CSS3で文字を設定する際の行の高さ属性とは何ですか？-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3で文字を設定する際の行の高さ属性とは何ですか？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 16, 2021 pm 04:10 PM

css

CSS でテキスト行の高さを設定するための属性は "line-height" です。この属性はテキスト行間の距離を設定するために使用されます。属性値が次の場合、構文は "line-height:value" です。数値、数値、行の高さに現在のフォントサイズを乗算します。属性値の単位が「%」の場合、現在のフォントサイズに対するパーセンテージで行の高さが設定されます。

CSS3で文字を設定する際の行の高さ属性とは何ですか？

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

css3 でテキストを設定するための line-height 属性は何ですか。

css では、テキストを設定するための line-height 属性は line-やあ。

line-height プロパティは、行間の距離 (行の高さ) を設定します。負の値は許可されません。

このプロパティは、ラインボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。

行の高さとフォントサイズの間の計算された差 (CSS では「行間隔」と呼ばれます) は 2 つの半分に分割され、テキストコンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはラインボックスです。

元の数値はスケーリング係数を指定し、子孫要素は計算された値ではなくこのスケーリング係数を継承します。

属性値は次のとおりです:

CSS3で文字を設定する際の行の高さ属性とは何ですか？

例は次のとおりです:

<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p class="small">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>

出力結果:

CSS3で文字を設定する際の行の高さ属性とは何ですか？