关于line-height属性值的不同写法

40 阅读 0 评论 27 点赞

我是靠谱客的博主曾经小蝴蝶，最近开发中收集的这篇文章主要介绍关于line-height属性值的不同写法，觉得挺不错的，现在分享给大家，希望可以做个参考。

1. line-height:150%;

行高=字号 * 150% ；当父元素设置line-height:150%，子元素没有设置行高的情况下，子元素会继承父元素的行高，子元素行高 = 父元素字号 * 150%；

<div class="parent" style="font-size:20px;line-height:150%;">
<div class="child" style="font-size:30px;">子元素</div>
//子元素的行高为 30px
</div>

2. line-height:1.5em;

此种情况和上同

3. line-height:1.5; (无单位)

行高 = 字号 * 1.5 ；当父元素设置line-height:1.5，子元素没有设置行高的情况下，这时父元素先计算出行高，然后继承给子元素，即：子元素行高= 子元素字号 * 1.5；

<div class="parent" style="font-size:20px;line-height:1.5;">
    <div class="child" style="font-size:30px;">子元素</div>
//子元素的行高为 45px
</div>

以上就是曾经小蝴蝶为你收集整理的关于line-height属性值的不同写法的全部内容，希望文章能够帮你解决关于line-height属性值的不同写法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。