(转载)line-height 3种设置方式的区别

转载来源 line-height 3 种设置方式的区别

line-height 是具有继承性的,如果直接在某个元素上使用 line-height,那么这三种写法是没有区别的,比如给所有的 p 标签添加行高属性:

1
2
3
4
5
6
7
8
9
p {
line-height: 1.5em;
}
p {
line-height: 1.5;
}
p {
line-height: 150%;
}

最后的效果是一样的。

这三种方式的区别在于,给父元素设置行高的时候子元素的继承方式。

em

  • 子元素字体大小的 em 是相对于父元素字体大小
  • 元素的 width/height/padding/margin/line-height等em 的话是相对于该元素的 font-size

假如我们有一个父 div 类名为 parent1,另一个父 div 类名为 parent2,均包含了一个类名为 child 的子 divHTML 结构如下:

1
2
3
4
5
6
7
<div class="parent1">
<div class="child">line-height: 1.5em;</div>
</div>
<br /><br />
<div class="parent2">
<div class="child">line-height: 1.5;</div>
</div>

CSS 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent1 {
font-size: 14px;
line-height: 1.5em;
background: #999;
padding: 10px;
}
.parent2 {
font-size: 14px;
line-height: 1.5;
background: #999;
padding: 10px;
}
.child {
font-size: 26px;
background: #ccc;
}

此时的页面如下截图:

line-height

可以看到,当设置 line-height: 1.5em 时,很明显子 div 的文字已经超出自己的行高范围了,设置 line-height: 1.5 时子 div 的文字没有超出自己的行高。

这是由于 CSS 继承时的计算方式区别造成的,如示例,当我们给类名为 parent1 的父 div 设置 line-height:1.5em 时,该 divfont-size14,此时经过计算父 divline-height14px\*1.5=21px,然后子 divline-height 就会继承 21px 这个值,而子 divfont-size26px,自然会超出自己的行高范围。

而当我们给类名为 parent2 的父 div 设置 line-height:1.5 时,子 div 会直接继承 line-height:1.5,然后计算 26px\*1.5=39px,不会超出自己的行高范围。

经过测试 line-height: 150%line-height: 1.5em 相同,都是先计算然后把固定的行高继承给子元素,所以我们可以总结一下,继承 line-height 的时候,带单位的先计算再继承,不带单位的直接继承

---- 本文结束,感谢您的阅读 ----