Understanding of the High line-height of CSS rows, and the high line-height of css rows

Understanding of the High line-height of CSS rows, and the high line-height of css rows

1. the literal meaning of the line height

"Line height" refers to the height of a line of text. Specifically, it refers to the distance between the baselines of the two lines. Baseline is a concept used in English letters. When we first learned English, there were four lines in each line of the English book. The second line at the bottom is the baseline, which is a, c, the ground edge of letters such as z and x. -------- Top line ------------------------------ midline (middle line) ---------------------- bottom line ------ vertical-align has top, middle, baseline, bottom is associated with it, but I am still not very clear about the specific details and browser differences. However, since noon is different from the English language, baseline is just like the old lady wearing a pair of lines. The bottom line is not the difference. It is just one thing to define, and the performance is another thing.

2. line-height and line boxes height

A well-known phenomenon is that there is an empty div, <div> </div>. If it is not set to a height value greater than 1 pixel, the height of the div is 0. if the div contains a space or a Chinese character, the div has a height. Have you ever thought about why there is a height after the text in the div? This is a seemingly simple problem, and it is very important to understand line-height. Some people may think it is: The article opened! The text occupies space and naturally splits the div. I also understood this at the beginning, but in fact, after a deep understanding of the inline model, I found that the text doesn't support the div height, but the line-height! The proof is very simple (the following test code): css code: <! -- Lang: css -->. test1 {font-size: 20px; line-height: 0; border: 1px solid # cccccc; backgroud: # eeeeee;} <! -- Lang: css -->. teset2 {fon-size: 0; line-height: 20px; border: 1px solid # cccccccc; backgroud: # eeeeee;} html code: <! -- Lang: html --> <div class = "test1"> Test 1 </div> <! -- Lang: html --> <div class = "test2"> Test 2 </div> result: test1 div has the text size, but the row height is 0, the result div height is 0. The text size of test2 div is 0, but the row height is 20 pixels. The result div height is 20 pixels. This indicates that line-height is not the text content that opens the div height. In the end, how does the line-height produce the height? In the linline box model, there is a line boxes, which is invisible. Line boxes is used to wrap each line of text. One line of text is line boxes. For example, if they are displayed in one line, you can use the line boxes to cover you; however, if you write the five words "Chun GE's pure father" in a vertical line, it is enough for the father to write a line boxes, so there are a total of five line boxes. Line boxes has no features, that is, height. Therefore, the height of a div without the height attribute is formed by the height accumulation of line boxes. In fact, line boxes is not a direct producer and belongs to middle-level cadres. The real work is done by line boxes, which are text and pictures, the label of the inline attribute such as span. Line boxes is only an inspection reporter who has the highest actual line-height value and the highest line-height value, and then reports it up to form a height. For example, <span style = "line-height: 20px;"> use line-height <span style = "line-height: 40px; "> maximum </span> value </span>. the height of line boxes is 40 pixels.