How to express 150% line spacing in css-Front-end Q&A-php.cn

How to express 150% line spacing in css

WBOY

Release： 2022-06-30 14:42:20

Original

1666 people have browsed it

In CSS, the line spacing of 150% can be expressed by "element {line-height:150%}"; the "ine-height" attribute can use the percentage value to set the line spacing of the element. When When using percent units, it represents a percentage of line spacing based on the current font size.

How to express 150% line spacing in css

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

How to express 150% line spacing in css

It can be expressed using the "line-height" attribute, the syntax is:

元素{line-height:150%}

Copy after login

line-height, also known as line Height refers to the distance between the baselines of two lines of text, which can also be called the height occupied by this line of text.

How to express 150% line spacing in css

You can set the line spacing through the line height attribute line-height, the syntax format is "line-height: spacing value;". The value of the Line-height attribute can be a relative value, an absolute value or a specific number; the larger the value of line-height, the higher the line spacing.

Examples are as follows:

<!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>

Copy after login

Output results:

How to express 150% line spacing in css

##Extended knowledge:

The The value of the attribute

#normal is the default. Set reasonable line spacing
#number Set a number that will be multiplied by the current font size to set the line spacing.
length sets fixed line spacing.
% Percent line spacing based on the current font size.

(Learning video sharing:

css video tutorial, html video tutorial)

The above is the detailed content of How to express 150% line spacing in css. For more information, please follow other related articles on the PHP Chinese website!