Go deep into CSS attributes (3): line-height

I. Definition of line-height

Line-height (line height): the distance between baselines of adjacent text lines. What is a baseline? For the text "Benjamin-xx engineer", the baseline is not the bottom line of the Chinese character, but the bottom line of the English letter "x.

2. Understanding of line-height

Sometimes, we will encounter that, if we don't set the width of the box, we only set the Row Height. Why can we also generate the height? Which of the following determines the height of CSS?
If the height of a tag is not set (value or percentage), the height is determined by the height. Let's look at a group of instances:
The height of the box is not set for the prerequisites:
CSS:

1

6	Benjmain01_a

7	Benjamin02_a

So how does line-height produce a height?
Let's first introduce two basic concepts:
1. Line box
The in-line box is a concept in the browser rendering model and cannot be displayed, but it does exist. Its height is the height specified by line-height (Row height.
2. row box
A row box refers to a virtual rectangle box of the line and is also a concept in the browser rendering mode. The row height is equal to the maximum value of the row inside the box of all elements in the row (based on the row inside the line-height (Row height) value, other rows and frames align to the baseline in their own alignment mode, and finally calculate the height of the row and box ).

Now we understand how this height comes from, max (the height of the line box)-> the height of the line box-> the height of the box

3. Application of line-height

1. Vertical center of Single Line Text
Set the container height to be equal to the line-height value.

2. Vertical center of multi-line text
A) fixed height container: it is OK to directly set the upper and lower padding values to be equal.
B) unknown height container: See the following example with line-height:

Code:

1

6

7	Now we can see how this height comes from. max (the height of the line box)-> the height of the line box-> inline box height-> affects the height of the parent element.

8

 

9

3. Vertical center of the image

In this case, we will go deep into CSS attributes in the next section (4): vertical-align

4. line-height: The difference between 1.5 and 150%

See the article for differences: line-height: 1.5 and line-height: 150%.

Other aspects of the line-height application will be supplemented later. If there is anything wrong with the above, I hope to correct it.

Originally: Benjamin-front-end development Attacker
Link: http://www.zuojj.com/archives/172.html
If you need to reprint it, please specify the original or original address in the form of a link.