ホームページ > 記事 > ウェブフロントエンド > CSSで行間を設定する方法
CSSで行間を設定する方法
- 青灯夜游オリジナル
- 2021-05-17 17:17:1719847ブラウズ
CSS では、行の高さ属性 line-height を使用して行間隔を設定できます。構文形式は「line-height: spacing value;」です。 Line-height 属性の値は、相対値、絶対値、または特定の数値にすることができます。line-height の値が大きいほど、行間隔も広くなります。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS には行間を直接設定できる属性がないため、line-height を使用して行間を設定する必要があります。line-height の値が大きいほど、行間は広くなります。
line-height プロパティは、線が使用するスペースの量、つまり線間の距離を設定するために使用されます。
注: line-height 属性では負の値を使用できません。
このプロパティは、ライン ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。
属性値:
通常のデフォルト。適切な行間を設定します。
#数値 行間隔を設定するために現在のフォント サイズを乗算する数値を設定します。
#length 固定行間隔を設定します。
% % 現在のフォント サイズに基づく行間隔。
Line-height の値が、相対値または絶対値の特定の数値に設定されていることがわかります。静的ページでは、テキスト サイズは次のようになります。絶対値を使用し、ユーザーがフォント サイズをカスタマイズできるフォーラムやブログの場合は、通常、対応する行間隔をユーザー定義のフォント サイズで変更できるように相対値に設定します。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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>
学習ビデオ共有:css ビデオ チュートリアル
以上がCSSで行間を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。