line-height: 150%、1.5em、1.5


line-height: 150%、1.5em、1.5的区别

line-height:150%
  • 父元素的行高为150%时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:150%时,字元素的行高等于16px * 150% = 24px:
line-height:150%
line-height:1.5em
  • 父元素的行高为1.5em时,会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:1.5em时,子元素的行高等于16px * 1.5em = 24px:
line-height:1.5em
line-height:1.5
  • 父元素行高为1.5时,会根据子元素的字体大小动态计算出行高值让子元素继承。所以,当line-height:1.5时,子元素行高等于30px * 1.5 = 45px:
line-height:1.5
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 标签: css-知识点 从下面这个题目入手分析 line-height 属性值为不同单位时的区别; 想要让站点内文...
    练晓习阅读 2,846评论 0 0
  • line-height line-height是一个比较常用的属性。我们常用的场合有两个: 一是设置两段文字在垂直...
    孤星伴明月阅读 2,723评论 1 9
  • 基本概念 行高、行距 行高是指文本行基线间的垂直距离。那什么是基线呢?记不记得vertical-align属性有个...
    select_yang阅读 726评论 0 4
  • 主题:【每日工作“三分类法”】 介绍: 说到工作,联想到了堆积如山的工作,于是中心主体的图像选择了山。分层时,根据...
    hedy6600阅读 370评论 0 0