开发者社区> 问答> 正文

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所在元素的实际行高是多少呢,原因是什么呢?

展开
收起
杨冬芳 2016-06-12 15:24:32 2353 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

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


    这个元素的字体大小是父元素的2倍,214=28px,行高是自己字体的3倍 283 = 84px

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

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

    2019-07-17 19:34:12
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载