Disclaimer in advance: There are some complexities here, which are one of the most complex knowledge points in CSS.
letter
The text is made by some text making software, such as fontforge
When making text, there will be several reference lines. Different text types have different reference lines . For the same text type, the reference lines are the same.
For example; Consolas font
font-size
Font size, which sets the relative size of the text
When we program, we set only the relative size of the font ! ! !
When we set the relative size to 200px, the actual size is 234px.
The relative size of the text : 1000, 2048, 1024 (a bit like the frame of movable type printing, not equal to the actual size of the font)
In computer and in reality, the size of the frame (relative size) is often smaller than the obtained font size (actual size).
The distance from the top line of the text (ascent in the figure) to the bottom line (descent) is the actual size of the text (called content-area, content area)
The background of the line box, covering the content-area.
This is why when we set the background color of the line box, there will be an extra part at the top and bottom. Because it covers the content area.
At this point, font-size is over.
row height
The space where the top line extends upward and the space where the bottom line extends downward, the two spaces are equal, this space is called line-gap (gap)
as shown in the figure:
line-gap By default, it's up to the font designer to decide, most line-gap values are positive, but there are also 0 and negative values.
top to bottom (see ppt diagram), called virtual-area (virtual area).
The line height is the virtual-area :
In actual development, we indirectly set the value of line-gap by setting the line height.
line-height: normal, the default value, use the default line-gap of the text (the default value is determined by the font setter).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-family: consolas;
font-size: 200px;
background-color: lightblue
}
p{
background-color: red;
}
</style>
</head>
<body>
<p>
<span>
M
</span>
</p>
</body>
</html>
In the picture above, the span background color just covers the red, indicating that the line-gap is 0.
Next we changed the font to Arial
and we noticed that there was a gap between the span background colors, but we didn't set the line height. At this time, the default line height is used, and the font Arial has line-gap. (Actually Arial font has a line-gap of 67).
We manually set the line height of the Consolas font to 1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-family: consolas;
font-size: 200px;
background-color: lightblue;
line-height: 1;
}
p{
background-color: red;
}
</style>
</head>
<body>
<p>
<span>
M
</span>
</p>
</body>
</html>
How to display?
Analysis: font-size is 200px, relative size is 200, actual size is 234px, that is, the size from ascent to descender is 234px, but the line height is set to 200px, that is, top to bottom to 200px, then line-gap is a negative value Woolen cloth.
Now the virtual area is smaller than the content area, the effect is as follows:
So setting line-height to 1 might have some problems ! At this time, there will be font overlap when there are multiple lines. As shown below:
Therefore, if you don't want to move the line height, you can set the line-height to normal.
Does the text always appear in the middle of a line?
No, where the text appears in this frame is entirely up to the designer
Does content-area necessarily appear in the middle of virtual-area?
Yes, the upper and lower line-gap is the same. But it may appear that the virtual-area is smaller than the content-area. But their midlines also overlap!
The actual size of many fonts is larger than the relative size (the font-size we set is relative size, but the proportional relationship between the actual size of different fonts and font-size is uncertain), so setting line-height to 1 will There is a problem: that is, the virtual area is smaller than the content area.
It is more reasonable to set it to normal.