Home > Article > Web Front-end > How to set html line height
htmlHow to set the line height: first create an HTML sample file; then create several lines of text content through the p tag in the body; finally set the line by adding the "line-height:20px;" style to the text As high as possible.
The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer.
How to set the line height for an HTML page
Setting the line height
Because it’s simple, let’s go straight to the code as usual. Note: line-height Attribute values can use fixed values such as: 20px.. and percentages such as: 20%.
If you want the text to be vertically centered as follows: The main function of the line height is to set the vertical center alignment of the text. The value of the line height can be the same as the value of the height.
Let us enter the line-height attribute practice. The practice content is such as: setting the p tag line height to 20px.
Code block
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>设置字符和单词距离</title>
<style>
p{
line-height: 20px;
}
</style>
</head>
<body>
<p>成功不是打败别人，而是改变自己。</p>
<p>成功不是打败别人，而是改变自己。</p>
<p>成功不是打败别人，而是改变自己。</p>
</body>
</html>Result graph
Note: Use percentages for the crude code block below.
【Recommended learning: HTML video tutorial】
<style>
p{
line-height: 20%;
}
</style>The above is the detailed content of How to set html line height. For more information, please follow other related articles on the PHP Chinese website!