CSS learning notes 06 simple understanding of line-height, csslineheight

CSS learning notes 06 simple understanding of line-height, csslineheight

When creating a page, you will often encounter text images that need to be centered. At this time, you only need to set the line-height attribute of the text to the height of the element that wraps the text to make the text center display. Let's take a look at this phenomenon.

1 <! DOCTYPE html> 2 

By default, the text is placed in the upper left corner of the div, and the line-height attribute of the text is now set.

At this time, we can see that the text is magically centered. Why? To know the reason, you need to understand what the line-height attribute is and what it represents. The line-height attribute is used to set the row spacing, that is, the distance between the row and the row, it is generally referred to as the line height. The more official explanation is the distance between the baselines of the text line. Here is a term that needs to be explained. I think you should have guessed it. That is, the baseline. So what is a baseline? Take a look at the image below

I'm very impressed, that is, the four-line three cells used for learning Pinyin in elementary school. This template is very similar to the template that will introduce the line-height principle.

Based on the above figure, it is easy to obtain the following equivalent relationship
Line Height = distance between two lines of text = text top line to text baseline + TEXT baseline to text bottom line + doubled line spacing = text top line + TEXT bottom line + double Line spacing (0.5 times above + 0.5 times below)
Since the text lines have 0.5 times the line spacing between the top and bottom, our text is naturally placed in the middle, this also explains why text is centered when the Row Height of the text is equal to the height of the element that wraps the text.