Home > Article > Web Front-end > How to set line spacing in css
How to set line spacing in css
- 藏色散人Original
- 2021-04-13 09:43:423190browse
How to set line spacing in css: first create an HTML sample file; then define multi-line text in the body; finally use the "line-height" attribute to set the line spacing.
The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.
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:
[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!