css3 - css line-height和font-size高度问题，谁能帮忙解释一下呢

Question

<p style="font-size: 14px;line-height: 3">
    <p style="font-size: 2em">
        hello
        <span style="font-size: 3em;line-height: 3em">
            world
        </span>
    </p>
</p>

hello和world所在元素的实际行高是多少呢,原因是什么呢？

Answer 1

<p style="font-size: 14px;line-height: 3>

This defines a baseline font size. Setting the line height to 3 means that the line height of all sub-elements below is 3 times that of its own font

<p style="font-size: 2em">
The font size of this element is 2 times that of the parent element, 214=28px, and the line height is 3 times its own font 283 = 84px

<span style="font-size: 3em;line-height: 3em">
The font size of this element is 3 times that of the parent element, 283=84px; the line height is itself 3 times the size of the font 843 = 252px

PS: Whether the line-height on the span is set or not, the effect is the same

Answer 2

The row height, the two people above calculated it very clearly, let me tell you the reason why I understand it.

Px is an absolute unit and does not support IE scaling, and em is a relative unit.

1em refers to the size of a font, which will inherit the font size of the parent element, so it is not a fixed value.

Not only the font, but also the unit of line spacing (line-height) and vertical height are em. Ensure integrity when scaling.
em refers to the font height. The default font height of any browser is 16px. Therefore, unadjusted browsers comply with: 1em=16px. Then 12px=0.75em,10px=0.625em.

In order to simplify the conversion of font-size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em,10px= 1em, that is to say, just divide your original px value by 10, and then change to em as the unit.

em has the following characteristics: the value of
1.em is not fixed;
2.em will inherit the font size of the parent element.

Rewriting steps:
1. Declare Font-size=62.5% in the body selector;
2. Divide your original px value by 10, and then replace it with em as the unit;

Calculate the font size and line spacing values ​​in em units to avoid repeated declarations of font size, that is, avoid the phenomenon of 1.2 * 1.2 = 1.44. For example, if the font size is declared to be 1.2em in #content, then when declaring the font size of p, it can only be 1em, not 1.2em, because this em is not the other em, and it changes due to inheriting the font height of #content. For 1em=12px.

Em clever use:
In Chinese articles, generally there are two spaces at the beginning of the paragraph. If you use px as the unit, you need to leave 24px for a 12px font, and 28px for a 14px font... This conversion is very unusable. If you use the em unit, this problem can be easily solved. The size of one word is 1em, and the size of the two words is 2em. So just define it like this:

p { text-indent: 2em; }

Answer 3

Since your parent element has set font-size:14px, the font-size of the child element is 1em=14px
and the line-height is 3, so the font size of hello is 214=28px, so line-height=328=84px
Since the em of the font will be inherited, the font size of world is 2314=84px, so line-height=3*84=252px

Answer 4

The answers above are all correct