How to set html line height-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to set html line height

藏色散人

Apr 28, 2021 am 09:11 AM

html

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.

How to set html line height

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>

Copy after login

Result graph

How to set html line height

Note: Use percentages for the crude code block below.

【Recommended learning: HTML video tutorial】

    <style>
        p{
            line-height: 20%;
        }
    </style>

Copy after login

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!

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