Home > Web Front-end > CSS Tutorial > How to adjust line spacing in css

How to adjust line spacing in css

王林
Release: 2023-01-03 09:25:17
Original
5097 people have browsed it

How to adjust line spacing in css: You can use the line-height attribute to adjust line spacing, such as [p.big {line-height:200%;}], which means that the line spacing of elements is adjusted to a hundred based on the current font size. Two hundred percent.

How to adjust line spacing in css

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

Attribute introduction:

The line-height attribute is used to set the line height in percentage.

Attribute value:

  • normal Default. Set reasonable line spacing.

  • #number Set a number, which will be multiplied by the current font size to set the line spacing.

  • #length Set a fixed line spacing.

  • % % line spacing based on the current font size.

  • #inherit Specifies that the value of the line-height attribute should be inherited from the parent element.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</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

Run result:

How to adjust line spacing in css

Related recommendations:CSS tutorial

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template