理解CSS行高line-height

先看上面这张图

我记得刚学英语的时候，英语作业本都是这种每行有4条线的格式，不过那时候老师并没有讲过这4条线代表什么。现在学CSS时候知道他们叫做顶线，中线，基线，底线。

另外这张图里有行高，行距，半行距，字号（font-size）等概念。你最熟悉的莫过于font-size了，就是字的大小。

基线（base line）一般是英文字母“x”的下端沿

行高（line-height） 属性用于设置文本行之间的间距，行高越大，行与行之间的垂直间距就越大。不仅如此，行高也可以用来实现文本垂直居中的效果

我们知道对于非替换的内联元素，例如span标签是没法直接设置高度和宽度以及上下外边距这些属性的，怎样让他们也有高度呢？ 答案是给他设置行高。

来看个例子

.main{
    background-color: #ccc;
    max-width: 1200px;
    margin: 100px auto;
}

<div class="main">
    <span>Python之禅</span>
</div>

父元素 div 在没有指定高度时，它的实际高度取决于它的子元素高度。所以在这里div的高度其实就是差不多就是子元素字体大小（行内框高度）。

span {
    line-height:100px;
}

现在给span设置行高，行内框的高度就变高了，与此同时父元素div的高度跟着变高，而且你会发现，行单文本在设置了行高后，文本在容器中是垂直居中的。（思考下为什么会居中？）

行距

行高数值上等于font-size与行距之和。行距指一行底线到下一行顶线的垂直距离。行距被 font-size 分隔成上下两个等分的半行距。所以现在明白设置行高后为什么单行文本会自动居中了吧，因为文本的上面和下面是两个高度相等的半行距，这也是单行文本居中常用的方式（如果容器设置了height属性，只需要将元素line-height值与height一样就可以居中）

行高（line-height） 与 font-size 的关系

font-size=line-height 时，行距为0。上下两行文字之间几乎没有间隔。

<div class="box">
    这是一段长的文字，这是一段长的文字，这是一段长的文字
</div>

.box {
    font-size: 16px;
    line-height: 16px;
}

line-height < font-size 时，行距就是负数，这时候，两行文字会有重叠。 注意 line-height 不可为负数。

line-height: 1px;

line-height > font-size 时，行距就大于0了，两行文本之间有了空白。一般我们都会将line-height的值设置为大于font-size，文字才有阅读体验效果。 实践中，line-height 通常设置为无单位的数值，例如 1.5， 1.5 其实就是font-size的1.5倍，16px*1.5 = 24px。 这时候，改变font-size 的值， line-height的实际值也会跟着缩放。

line-height: 24px;

行高（line-height）的5种取值

行高（line-height）是怎么继承的？

line-height 是一个可以被子元素继承的属性，使用无单位的数值时，在每个继承子元素上会重新算它的计算值， 例如：

body {
    line-height: 1.2
}

.div1 {
    font-size:2em
}

默认1em 是16px，div1 的line-height 是 2em * 1.2 * 16px = 38.4px。

body {
    line-height: 1.2em
}

而使用带单位（em，px，rem）的值时，1.2em*16px = 19.2px， 后代元素直接继承的是它的计算值，不管子元素的font-size是多少，它的行高都是 19.2px。可能造成文字重叠的意外结果。

深入理解行高（line-height）

为了更深入理解行高，有必要明白CSS中4种类型的盒子

<p>hello world <em>css</em> is amazing</p>

containing box ：就是最外层的容器盒子

inline box：可以是一个由行内元素包裹的盒子，也可以是一个纯文字的匿名盒子。 下面hello world 就是一个匿名的 inline box。 inline box 高度是由行高撑起的。

line box：包裹 inline box 的一个盒子，一个或多个 line box 堆叠撑起一个 HTML 元素。 libe box 的高度取决于最高的那个 inline box 的高度。

content area：是围绕着文字的一种看不见的盒子，对于非替换元素来说，content area 的高度由 font-size 以及字体本身决定；对于替换元素来说，由元素自有宽高决定。

参考阅读：

1、https://www.cnblogs.com/rainman/archive/2011/08/05/2128068.html
2、https://www.cnblogs.com/dolphinX/p/3236686.html
3、https://blog.csdn.net/a2013126370/article/details/82786681
4、https://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html
5、https://www.slideshare.net/daemao
6、https://segmentfault.com/a/1190000017512478

关注公众号「Python之禅」，回复「1024」免费获取Python资源