CSS line-height sets the height of the font range (line spacing)

 With CSS syntax, you can easily set the line spacing of the text, that is, the distance between each line, which makes reading more comfortable. If the line-height is not set, the distance between each line will be rendered in the browser preset effect. There will be a problem, that is, the size of the text may affect the presentation quality of the article, so it is better to give the line-height value.

CSS line-height basic syntax

line-height: setting value;

The setting value can include normal (default value), number, height value (including unit), percentage, and inherit (row height value inherited from the parent layer), among which inherit is recommended not to be used, because old IE browsers may not Yes, I usually use the height value, just look at a simple example.

CSS line-height example

<span style='line-height: 20px;font-size:13px;'>
　line-height: normal text line height setting first line<br>
　line-height: normal text line height setting second line
</span>

Rendering effect like

line-height: normal text line height setting first line
line-height: normal text line height setting second line

In the example, we give the line-height value of 20px, which also means that the height of each line is 20px. You can also try to use other values ​​to bring in the example to see the result. To make the article present a good reading effect, line-height is usually used in conjunction with font-size (text size). If the text size is not set, text overlap may occur.