ホームページ > 記事 > ウェブフロントエンド > 行の高さを示すCSSプロパティとは何ですか?
行の高さを示すCSSプロパティとは何ですか?
- 青灯夜游オリジナル
- 2021-07-05 17:45:152436ブラウズ
行の高さを示す CSS 属性は line-height です。この属性は行間の距離 (行の高さ) を設定できます。構文は "line-height: value;" です。属性値には負の数値を指定できません。 line-height 属性をブロックレベル要素に適用すると、要素内のベースライン間の最大距離ではなく、最小距離が定義されます。
このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。
行の高さを示す CSS 属性は line-height です。
line-height 属性は行間の距離 (行の高さ) を設定できます。負の値は許可されません。
line-height プロパティは、行ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。
行の高さとフォント サイズの間の計算された差 (CSS では「行間隔」と呼ばれます) は 2 つの半分に分割され、テキスト コンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはライン ボックスです。
line-height 属性で設定できる属性値:
| Value | Description |
|---|---|
| normal | デフォルト。適切な行間を設定します。 |
| number | 現在のフォント サイズに乗じて行間を設定する数値を設定します。 |
| length | 固定行間隔を設定します。 |
| % | 現在のフォント サイズに基づくパーセントの行間隔。 |
| inherit | line-height 属性の値を親要素から継承することを指定します。 |
例:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
}
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>
<p>
这是一个标准行高的段落。
浏览器的默认行高为“1”。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>
<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>
<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>
</body>
</html>レンダリング:
(学習ビデオの共有: CSS ビデオ チュートリアル )
以上が行の高さを示すCSSプロパティとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSってフレームワークですか？次の記事：CSSってフレームワークですか？