The advantage of not setting a unit in line height line-height:1.8

Today inadvertently saw the line-height:1.8 feel quite interesting, and then turned down the high knowledge, found also quite an article, may be warm so know new.

First look at the following: Top line, midline, Baseline, bottom line

The vertical-align is the vertical alignment of the elements, and also depends on the lines, which have top (top line alignment), middle (centerline alignment), Baseline (baseline alignment), bottom (bottom line alignment), respectively.

Line spacing and row height (the distance between the baseline of a line of text):

In order to make it more convenient to measure the high value of the line, I usually choose the text bottom to the text bottom this way to measure, and the height is the same.

===================================================================================

So what's the use of line-height:1.8 this?

The row height is inheritable, but the computed value is inherited, such as:

<Divstyle= "background: #ddd; height:100px;line-height:180%;font-size:15px;">                <Pstyle= "font-size:30px">Chinese 中文版<BR/>Chinese 中文版</P></Div>

Here div's Row height is 180%*15px=27px

and the line height of p is calculated 27px instead of 180%*30px=54px

From the above example we know that the gap between the text is not only the height of the decision, but also affected by the font size,

If you inherit a computed value, it may cause the font to overlap when the text font size in the element is different.

To avoid this, you can define a value that does not have a unit as the scaling factor to uniformly control the row height, and the scaling factor is inherited directly, not the computed value:

<Divstyle= "background: #ddd; height:100px; line-height:1.8; font-size:15px; ">                <Pstyle= "font-size:30px;">Chinese 中文版<BR/>Chinese 中文版</P></Div>

The P-line height here is 1.8x30px=54px, which means the effect is the same as the following code.

<Divstyle= "background: #ddd; height:100px;font-size:15px;">                <Pstyle= "font-size:30px; line-height:54px">Chinese 中文版<BR/>Chinese 中文版</P></Div>

The advantage of not setting a unit in line height line-height:1.8