Home > Article > Web Front-end > How to set CSS line spacing

How to set CSS line spacing

不言Original: 2018-10-31 10:15:5121258browse

How to set CSS line spacing: first create an HTML sample file; then define some text content in the body; finally set the line spacing through the line height "line-height".

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

In the layout of a web page, it always looks unsightly to have several large paragraphs of text crowded together. At this time, we need to set the line spacing to make the text look less crowded and to make the entire page look beautiful and tidy. So, how to set the line spacing? This article will introduce to you how to set CSS line spacing.

First of all, we should know that there is no attribute that can directly set the line spacing in CSS, so we need to use line-height to set the line spacing. The larger the value of line-height, the higher the line spacing. The spacing is higher.

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>

The effect of css setting line spacing is as follows:

How to set CSS line spacing

This article ends here. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !

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

Statement：

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

Previous article：What is displaytable? How to apply display:table-cellNext article：What is displaytable? How to apply display:table-cell

See more

How to set CSS line spacing

Related articles