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

问题描述

问 题

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

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

解决方案

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

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

<div 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设置与否，效果是一样的

这篇关于css3 - css line-height和font-size高度问题，谁能帮忙解释一下呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！