In-depth understanding of line-height in CSS

Grammar：
Line-height:normal | Length
Parameters：
Normal: Default row height
Length: Percent number | A length value consisting of a floating-point number and a unit identifier that is allowed to be negative. The percentage value is based on the height size of the font. See Length Units
Description：
Retrieves or sets the row height of the object. That is, the distance between the bottom of the font and the top of the font.
If the row contains more than one object, the maximum row height is applied. The row height cannot be negative at this time.
The corresponding script attribute is lineheight. Please refer to the other bibliography I have written.
Example:

div {line-height:6px;} div {line-height:10.5;}

What is the difference between line-height and height in CSS?

In short, line-height is the meaning of line height, while height defines the heights of the elements themselves.
For example, the following code
<div class= "Test" > "text" text text text text text text text text text text text text text text text text text text text text text </div>
If we define. Test {line-height:20px;}, then the actual height of this element will depend on how much of the content, if the text part in the browser display as a line, then the actual height of the div is 20px, if the text is displayed as two lines, Then the actual height of the div is 40px, and the line height of the text is 20px;
If we define. test{height:40px}, then the actual height of this element is generally not changed because of the amount of content, if the text is displayed as a line, then the height of the div is still 40px, if displayed as 2 lines, but the line height of the text is not 20px, The height of this div is not changed by the height of the text content. However, if the height of the text content is greater than 40px, in general, the height of this div will increase correspondingly.

Line-height and Line boxes height
The height of the CSS in the role of the should be the height and line-height it! If a label does not have a height attribute defined (including a percentage height), then the height of its final performance must be line-height, even if the default height bug is around 11 pixels under IE6. Wait for me to slow down.

First of all, we are familiar with the phenomenon, there is an empty div,<div></div> If you do not set a height value that is at least 1 pixels high, the height of the div is 0. If a space or text is entered into the Div, the div will have a height. So you have thought about it, why does the div have a height after it has text?

This is a seemingly simple question, a very important question to understand line-height. Some people may think it is: the text is open! Text occupies space, and naturally the div is open. I understood it from the beginning, but in fact, after an in-depth understanding of the inline model, I found that it was not the text that opened the div's height, but the line-height!

Line-height's attention.

1. Use Line-height to work only on text
2. With Dreamweaver you can see the effect of line-height in real time
3. This value cannot use negative values, and it is not valid to use the
Note that In the browser for the line-height of the resolution is also a slight difference, there will be 1px difference, if the row height is even, most of the browser interpretation is relatively normal, if it is odd, some browsers will be more than 1px, and some other browsers will be more than 1px, For some sites that are more stringent, it is recommended that you use even

for high design.