We know that row heights can be inherited and there are four of units in the row height.
1 specific pixel values such as: line-height:16px;
2 em
EM refers to the current label settings font size, such as the current label font size is 16px, then 2em = 32px;
3%
% and EM are all based on the font size set by the current label, such as the current label font size is 16px, then line-height:200%; The font size is 32px;
4 no units are taken.
Is the same as%, for example, the current label font size is 16px,line-height:2; the font size is 32px;
Let's take a look at an example of a row high normal inheritance
<! DOCTYPE html>
In the parent element regardless of setting line-height:2;line-height:200%; Or LINE-HEIGHT:2EM, you can find that the line height of the font becomes 40px.
If we give the child element Div also set the font to 25PX, the parent element's row height is 2em or 200%, the row height is still 40px.
. one {
font-size:20px;
Line-height:2em;
/*line-height:200%;*/
}
. two {
font-size:25px;
}
So the question is, if the row height of our parent element is 2 (without units), then the row height is still 40px.
. one {
font-size:20px;
Line-height:2
}
. two {
font-size:25px;
}
In the browser we can see that the row height turns to 50px.
So we need to pay attention to two points when setting the line height:
1, in the set line height, if the unit is EM or%, then the future row height will be calculated before the results of the successor to the child elements.
2, in the setting line height, if the unit is no unit, then the future row height will inherit to the child elements, and then calculate travel high.