Home >Web Front-end >Front-end Q&A >How to express 150% line spacing in css
How to express 150% line spacing in css
- WBOYOriginal
- 2022-06-30 11:30:251665browse
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.
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%}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.
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>Output results:
##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.
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!