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>

这个是定义了一个基准的字体大小，行高设置3的意思是下面所有子元素，其行高是自己字体的3倍

<p style="font-size: 2em">
这个元素的字体大小是父元素的2倍，214=28px，行高是自己字体的3倍 283 = 84px

<span style="font-size: 3em;line-height: 3em">
这个元素的字体大小是父元素的3倍，283=84px；行高是自己字体的3倍 843 = 252px

PS： span上面的line-height设置与否，效果是一样的

Answer 2

行高，楼上两位都计算的很清楚了，我来说说我理解的原因吧。

px是绝对单位，不支持IE的缩放，em是相对单位。

1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。

不仅仅是字体，将行距(line-height)，和纵向高度的单位都用em。保证缩放时候的整体性。
em指字体高，任意浏览器的默认字体高都是16px。所以,未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说,只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点:
1.em的值并不是固定的;
2.em会继承父级元素的字体大小。

重写步骤:
1.body选择器中声明Font-size=62.5%;
2.将你的原来的px数值除以10，然后换上em作为单位;

计算em单位的字体大小和行距数值，要避免字体大小的重复声明，也就是避免1.2 * 1.2= 1.44的现象。比如说在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

em巧用：
中文文章中，一般段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：

p { text-indent: 2em; }

Answer 3

由于你父元素设置了font-size:14px，所以子元素font-size中1em=14px
而line-height为3，所以hello的字体大小是214=28px,所以line-height=328=84px
由于字体的em会继承，所以world的字体大小是2314=84px，所以line-height=3*84=252px

Answer 4

楼上都是正解