CSSで行間150%を表現する方法-フロントエンドQ&A-php.cn

CSSで行間150%を表現する方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2022-06-30 14:42:20

オリジナル

1716 人が閲覧しました

CSS では、150% の行間隔は「要素 {line-height:150%}」で表現できます。「ine-height」属性はパーセント値を使用して行間隔を設定できます。パーセント単位を使用する場合、現在のフォントサイズに基づいた行間隔のパーセンテージを表します。

CSSで行間150%を表現する方法

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

css で 150% の行間隔を表現する方法

「line-height」属性を使用して表現できます。構文は次のとおりです。

元素{line-height:150%}

ログイン後にコピー

line-高さ (行とも呼ばれる) 高さは、2 行のテキストのベースライン間の距離を指し、このテキスト行が占める高さとも言えます。

CSSで行間150%を表現する方法

行の高さ属性 line-height を使用して行間隔を設定できます。構文形式は「line-height: spacing value;」です。 Line-height 属性の値は、相対値、絶対値、または特定の数値にすることができます。line-height の値が大きいほど、行間隔も広くなります。

例は次のとおりです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:150%;}
</style>
</head>
<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>
<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>
<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>
</body>
</html>

ログイン後にコピー

出力結果:

CSSで行間150%を表現する方法