html5の行間ってどういう意味ですか？-フロントエンドQ&A-php.cn

html5の行間ってどういう意味ですか？

WBOY

リリース： 2022-01-23 17:33:51

オリジナル

5013 人が閲覧しました

HTML5 では、行間隔は「line-height」で表されます。テキストの行の高さを設定するには、この属性を使用します。この属性は、行ボックスのレイアウトに影響します。ブロックレベルの要素を設定する場合、この要素のベースライン間の最小距離が定義されます。構文は「」です。

html5の行間ってどういう意味ですか？

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

html5 行間隔とは何ですか?

line-height プロパティは、行間の距離 (行の高さ) を設定します。

注: 負の値は許可されません。

説明

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

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

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

このプロパティ設定で可能な値は次のとおりです:

html5の行間ってどういう意味ですか？

例は次のとおりです:

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

ログイン後にコピー

出力結果:

html5の行間ってどういう意味ですか？