How to set line spacing in css-CSS Tutorial-php.cn

How to set line spacing in css

醉折花枝作酒筹

Release： 2023-01-05 16:08:58

Original

12731 people have browsed it

In CSS, you can use the line-height attribute to set the line spacing. The syntax is "line-height: value;"; this attribute is used to set the distance between lines. The larger its value, the greater the line spacing. The higher it is. The value of the line-height attribute can be set to a relative value or an absolute value.

How to set line spacing in css

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

The value of Line-height is set to a specific value, which can be a relative value or an absolute value. In static pages, absolute values are often used when the text size is fixed, but for users such as forums and blogs Pages with customizable font sizes are usually set to relative values, so that the corresponding line spacing can be changed with the user-defined font size.

Let’s take a look at the code example of using line-height to set line spacing in css:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span {
                font-size: 20px;
                line-height: 2em;
            }
        </style>
         
    </head>
    <body>
        <span>
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
        </span> 
    </body>
</html>

Copy after login

The effect of css setting line spacing is as follows:

How to set line spacing in css

Recommended learning: css video tutorial

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