Why is there a gap up and down in the height occupied by words?

clipboard.png

the height of the selected text in the diagram is supposed to be level with the bottom edge of the number "2", right? Why are there so many gaps?

Css
Jun.07,2022

Thank you for the invitation!
text has line height by default and is divided into browsers. At present, the default line height of chrome browser is 1.4 times that of font-size. The cardinality comes from the font-size of the current text, and even if line-height is set to the number 1 (which is twice the line height of font-size, there will be a gap). The off-work alignment you're talking about can only be done by other means, such as increasing the line height, such as positioning.


because there is the word yg, leave space on both sides.
where the word yg will not appear in your picture, you can set line-height to be the same as font-size. Come on, remove the white space on both sides


line-height


because there is line-height by default, you can set line-height:1


it doesn't feel like the reason for line-height upstairs. In my opinion, please correct if there is anything wrong:
image.png
the blue part of the question is the content area, that is, the part from the top line to the bottom line. The bottom line is defined as the line corresponding to the lowest point of the lowercase letter y, and the top line is defined as the line corresponding to the highest point of the lowercase letter k or h in the printed type. the position of the top line is higher than the highest point of k or h. So the height of the content area will be higher than the height of the text, resulting in gaps.
line height refers to the vertical distance between the baselines of the context line, that is, the height of the text content itself + line spacing. So you can try, even if you increase the line height, the height of the blue content area seems to be the same

.
Menu