line-height用了这么久，你真的了解他么

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

介绍

众所周知，line-height 是作为设置多行元素的空间量(即行高)被引入的，通常被用来设置文字段落之间的间距，它也是CSS最早被定义的属性之一，时至今日，在日常排版布局中极为常用。可是，line-height 用了这么久，你真的了解他么，本期，将给大家带来的是 line-height 可以设置不同的数值形式后带来不同的影响。

演示

https://code.juejin.cn/pen/7111496043442749454

单位

对于块级元素，line-height指定元素行盒的最小高度。它除了可以传入长度单位 px 外，还可以传入很多数值形式，比如说关键字，百分比等等。接下来，我们就介绍另外的四种形式。

em

em作为css常用的长度单位，其可以理解为当前元素字体大小所占空间，即，1em 相当于当前元素设置的 font-size 的大小，而 1.5em 相当于当前元素的字体大小的1.5倍。

如下图演示，我们可以发现，当使用em作为单位时，每一行的间距都变成相同的了，因为如果设置成em作为单位，它会只找寻 父元素div 的 font-size ，也就是那个32px的值，而且下面的 p标签 则会继承父元素的 line-height ，所以每行的行高都变得相同了。

演示3.png

百分比

百分比或许在我们在设置块元素的宽高时经常会用到，但是在设置 line-height 也可以使用，它会参考父元素的字体大小进行设置，即，100% 相当于当前元素设置的 font-size 的大小，而 150% 相当于当前元素的字体大小的1.5倍。所以，这里设置百分比和em单位相同，都会继承父元素的行高，无法自己适应当前元素。

演示4.png

无单位数字

无单位数字顾名思义，可以不用设置单位，你可以理解为当前元素 font-size 的倍数，这种形式可以让元素适应自己的 font-size 大小来做行高。

如下图，我们就可以发现行高会不同元素的 font-size 变化而变化。

演示2.png

normal

normal 作为 line-height 里面唯一特有的关键字，也是默认值。而它的大小取决于当前的浏览器内置的默认值的多少。而默认值绝大多数情况是一个无单位数字，所以并不会继承父元素的 line-height ,而是根据自己当前的 font-size 自动进行调整。

演示1.png

简写

div{
    font: 32px/48px Georgia,serif;
    font: 32px/1.5em Georgia,serif;
    font: 32px/150% Georgia,serif;;
    font: 32px/1.5 Georgia,serif;
    font: 32px/normal Georgia,serif;
}
复制代码

总结

可以看到使用长度单位和百分比都可以继承父元素的行高，而无法适应每个元素自己的行高除非单独设置。而且无单位数值就解决了这一点，会根据自身元素的 font-size 的大小变化而变化，而初始化会默认关键词normal，它可以理解为默认成一个依据浏览器而不同的无单位数字。所以，也是按官方推荐的善用无单位数字，让你的css更加的轻灵吧。