浅谈CSS中line-height:200% | 2.0em | 2.0 的区别

筱葭

于 2017-03-13 19:01:29 发布

阅读量1.7k

点赞数 3

分类专栏： CSS 文章标签： CSS line-height 200 2.0em 2.0

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/61924561

版权

53 篇文章

订阅专栏

本文详细解析了CSS中行高(line-height)的不同单位对于子元素行高计算的影响，包括百分比、em单位以及数值倍数的计算方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div style="line-height:200%;font-size:15px;">
	父元素<div style="font-size:30px;">子元素</div>
</div>

①　父元素的行高为200%时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:200%时，子元素的行高等于15px * 200% = 30px。

②　父元素的行高为2.0em时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:2.0em时，子元素的行高等于15px * 2.0em = 30px。

③　父元素的行高为2.0时，会根据子元素的字体大小先计算出行高值然后再让子元素继承。所以当line-height:2.0时，子元素的行高等于30px * 2.0 = 60px。