极客小俊

把逻辑思维转变为代码的技术博主

你不用拼过聪明人，你只需要拼过那些懒人 你就一定会超越大部分人!

什么是行距?

行距又称为 行间距

行距 从意义上来说 作用是让我们阅读文章的时候，好确定阅读的方向!

行距 从css的角度来说, 代表的不是一个地方, 而是要分为两个部分! 分别是一个文本行内容的顶部和底部!

也就是说 底线下面粉红色标注区域 和 顶线上面粉红色标注区域, 就是行间距

如下图:

中间黄颜色部分 等于  上半行距 + 下半行距 之和 就是行间距,  也就是行高与字体尺寸的差称为行间距

但即使是只有一行文字,其实上方也是有行距的 只不过这个行距的高度仅仅是完整行距高度的一半!  俗称 半行距

行距小结: 指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。

当然，有些人的理解是: （上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2

行距的计算公式

为什么我们要算行距呢？  是因为上面提到了 半行距  那么这个半行距是如何求得呢 ？ 我们就要了解一下这个行距的计算公式了!

行间距 = line-height的值(行高) - font-size字体大小  (行间距 = 行高 - 字体大小)

然后 算出来的这个行间距 / 2 所得到的值分别给粉红色的两部, 分别加到一个行内框(内联盒子)的顶部和底部即可!  

也就是俗称的 半行间距【（行高-字体size）/2 】分别增加  或者 减少到内容区域的上下两边:

例如:  设置行高为40px;   字体大小设为16px ,  那么根据上面的公式我们得到行间距的值是24px, 这个24像素要除以2 划分为两个部分!

也就是行内容的顶部 和 底部  这两个地方分别为: 12px像素!  

案例代码:

 <style>
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         line-height: 40px;
         font-size: 16px;
     }
 </style>
 
 <div id="cont">
     在过去的52周，腾讯的最低股价为324.29港元，最高为633港元。按照最高股价计算，腾讯的总市值在过去一年创造了历史新高——突破6万亿港元。
     在2018年的“930改革”后，经历2019年的波动，腾讯终于在2020年重新回到增长轨道。
     一方面，随着游戏版权开放，加上全球新冠肺炎疫情蔓延，腾讯的“现金牛”业务游戏收获颇丰；另外一方面，腾讯坚决落地产业互联网战略，并初见成效，摆脱了增长依赖于游戏业务的局面。
     在高速增长下，2020年腾讯也存在一些隐忧，随着监管部门加强对于互联网平台经济的监管和反垄断的深入进行，腾讯需要在适应环境变化的情况下保持增长
 </div>

所以上下文本之间的行间距也就是上面文本底部的12像素+下面文本顶部的12像素!

真正理解什么是行高?

我们知道了内容区域与字体字号大小的关系、也知道了什么是行间距以后, 其实我们就可以反推出 行高是什么了!

公式: 内容区域content area(或字体大小) + 行间距 = 行高

注意 :

1. 以上我们说的内容区域大小 其实相对而言就可以理解为 font-size字体大小!

2. 行高跟字体样式也有一定关系!  不同的字体默认的行高是不一样的!  因为字体的不同影响了内容区域!

line-height行高小结

行高（line-height）：就是包括内容区域(content area)与以内容区为基础对称拓展的空白区域(也就是上下半行距)，我们称之为行高。

一般情况下，也可以认为是相邻文本行基线间的距离。

如下图:

line-height的各种取值类型

line-height的取值可以是一个像素值!

特别注意:

1. line-height的大小与font-size大小 相等时, 那么行间距为0! 也就是说相当于没得行间距!

2. line-height的大小 不能小于 当前元素的font-size大小!   否则算出来的行间距会负数 导致 每一行之间的文本重叠! 如下图

line-height的取值可以是一个百分比%

指定一个百分数, 意思就是会相对于font-size字体大小去计算行高!  没有明白吗？那我们看下面的案例吧!

案例1

font-size大小为30px,而line-height的大小为80%，也就是说line-height的大小占 font-size大小的80%，又因为80%相当于 80/100就等于0.8，所以最终line-height的大小也就是行高为30px*0.8=24px,根据上面的公式，那么行间距就为24px-30px=-6px，上面文本底部与下面文本顶部都为-3px。

代码如下：

 <style>
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         line-height: 80%;
         font-size: 30px;
     }
 </style>

注意: 但是如果使用百分比,那么这个百分比通常不会小于100%,因为小于100%所计算出来的行距值是一个负数!  其实跟上面的line-height的值小于当前元素的font-size的值是一个道理!  都是没有意义的!

如下图：

案例2

font-size大小为30px,而line-height的大小为200%，也就是说line-height的大小就是 font-size大小的两倍，又因为200%相当于 200/100就等于2，所以最终line-height的大小也就是行高为30px*2=60px,根据上面的公式，那么行间距就为60px-30px=30px，上面文本底部与下面文本顶部都为15px。这样用百分比来表示行高才有意义。代码如下：

 <style>
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         line-height: 200%;
         font-size: 30px;
     }
 </style>

如下图：

小提示: line-height的百分比取值并不是很常用!  通常都是像素值!

line-height的取值可以是一个整数数字!

如果设置line-height的值为一个整数数值，那么则行高的值其实就是font-size字体大小相应的倍数!

简单的说就是如果设置数值 此数字会与当前的font-size字体大小相乘来设置行间距!

案例如下:  这里line-height设置为2 也就相当于上面的 line-height设置为:200%是一个道理!那么行高的实际大小为：30px*2=60px,也就是说line-height:60px，则半行距=(60px-30px)/2=15px。代码如下：

 <style>
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         line-height: 2;
         font-size: 30px;
     }
 </style>

line-height属性与内联元素 垂直居中的关系

1、line-height让单行文本垂直居中详解

相信大家都知道一种说法，想要让一个单行文本垂直居中，那么只要设置line-height 的大小和 height高度一样就可以了

例如:

一个块元素中只有一行文字 或者 超级链接文字的情况下，也就是说对于单行文本可以将line-height行高设置为当前元素 或者 父元素的高度一样就可以了!

这样就可以让这个单行文本在当前元素中  或者 说父元素中 垂直居中!

案例

 <style>
     #cont{
         width:600px;
         height: 100px;
         background-color:rgb(255,255,30);
         font-size: 30px;
         line-height: 100px;
     }
 </style>
 
 <div id="cont">
     hello world!
 </div>

但从我查阅资料并实际操作后，证明让line-height的值设置为和height值一样来实现单行文本的垂直居中这种说法并不是很正确!  

原因有如下:

要让单行文本垂直居中。其实只需要设置line-height这一个属性就可以了，根本不需要再设置一个height属性, 所以有很多教程也误导了大多数人一定要去设置一个height属性才可以垂直居中，其实不然!  如下:

 <style>
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         font-size: 30px;
         line-height: 100px;
     }
 </style>

2、line-height只能让文本近似于垂直居中

这里的垂直居中只仅仅是无限接近于垂直居中! 为什么要说成是接近于垂直居中呢?

原因1: 行高的实现在于CSS中的行间距是 一行文字的上下等分机制! 也就是说一行文本的上面和下面所存在的行间距是相等的! 所以如果行间距只存在于一边的话 那么文字是无法垂直居中的, 其实这也证明了文字垂直居中靠的重要因素就是上下行间距!

原因2: 刚刚说了 接近于垂直居中，因为文字的中线位置普遍要比 行框盒子的中间线位置要低一些!  如果你不理解 请看下图: 黄颜色的线 为行框盒子的中间线表示位置,  蓝色的线为文字的中线位置! 是不是文字中线比行框盒子低呢! 对吧!  但有些字体因为看起来可能比较有下沉的感觉，所以可能在行间距垂直居中的作用下会有1px像素的小差异 所以我们称之为：接近于垂直居中!

所以我们说的接近于垂直居中 而不能完全是垂直居中的原因是 vertical-align造成的, 和line-height是没有关系的， 关于vertical-align属性 在后面会详细说到这里就不多说了!

3、line-height让多行文本垂直居中

使用line-height来控制文本垂直居中,不仅仅用于单行文本，  就连多行文本其实也是可以进行垂直居中的!

多行文本的垂直居中和 单行文本中就不一样了! 需要使用到vertical-align属性!

案例代码:

 <style>
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         line-height: 200px;
     }
     #cont>p{
         line-height: normal;
         display: inline-block;
         vertical-align: middle;
     }
 </style>
 
 <div id="cont">
     <p>
         测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
         测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
         测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
         测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...测试数据...
     </p>
 </div>
 

效果图如下:

原理实现如下

1. 多行文本使用一个元素来包裹, 不管你用div、p、还是span、内联元素 还是 块元素来包裹都是可以的! 但是必须设置一个display: inline-block; 好处就是让这个元素保持内联元素的特性

2. 给多行文本的包裹元素 设置 line-height: normal; 是为了清除继承下来的行高!

3. 在给包含多行文本的元素设置了 display: inline-block;  属性后 会产生关键的 行框盒子  而且前面我们已经知道了 只要有一个行框盒子那么都会附带一个 幽灵空白节点! 还不明白的会上面看看!   我们设置 line-height: 200px;就作用到了这个幽灵空白节点上!  从而在行框前面 撑开了 200px的高度

4. 又因为给多行文本的包含元素设置了display: inline-block;  它现在是内联元素, 而内联元素 默认是基线对齐的, 所以我们又给这个包含元素p设置了vertical-align属性值为:middle 来调整这个多行文本的垂直位置!  最后就实现了我们所看到的多行文本垂直居中效果!  如果是图片原理是一样的!

line-height 与 font 的使用顺序问题

使用font属性也可以设置行高，可以在字体大小后添加 /行高大小 来表示行高，这个值是可选的，不指定的时候会采用默认值也就是没得。

例如:

 font: 30px/行高值px '字体样式';

但是当line-height属性设置在 font 属性之前，并且 font 属性中没有设置行高的时候，line-height属性会被font 属性中的行高默认值覆盖，也就是说在这个时候line-height属性是无效的。所以如果想要设置行高，可以把line-height属性设置在 font 属性之后，也可以直接在 font 属性里面设置行高。

案例:

 <style>
     /*line-height会被font的默认行高而覆盖*/
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         line-height: 50px;
         font: 30px '微软雅黑';
     }
     
     /*line-height写在font下面会被正常解析*/
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         font: 30px '微软雅黑';
         line-height: 50px;
     }
     
     /*直接通过font来调整line-height行高*/
     #cont{
         width:600px;
         background-color:rgb(255,255,30);
         font: 30px/50px '微软雅黑';
     }
     
 </style>

小结: 所以使用font属性的时候要注意一些其他文本属性的顺序，例如line-height, font-style,font-weight,font-family 这些属性要是写在font前面都可能被后面的font默认值所覆盖! 注意使用顺序即可!

line-height 与 图片之间的细微关系

我们先来看一个案例吧:

 <style>
     div{
         width:500px;
         background: yellow;
     }
 </style>
 
 <div>
     <img src="images/1.gif">
 </div>

结果图:

从上图中可以看出，图片在div元素中的下部会有一点点间隙! 这正因为前面提到的 匿名空白文本节点的存在，才会造成图中的情形!

为什么给父元素设置text-align: center; 会让内部的img元素居中?

案例:

 <div>
     <img src="images/1.gif">
 </div>
 <style>
     div{
         width:300px;
         background: yellow;
         text-align: center;
     }
 </style>

如图:

原因: 这其实是居中的 幽灵空白节点, 而不是图片!  因为幽灵空白节点也是一个文本节点,设置text-align: center; 理所当然会居中，而且后面的图片和前面的幽灵空白节点同样都是 内联元素，幽灵空白节点居中的时候就把图片顶过来了! 而且幽灵空白节点是0宽度看不出来的，所以我们看到的就仅仅是图片居中了!  (个人理解仅供参考)

解决图片因幽灵空白节点而产生的底部空隙

1. 图片块状化。vertical-align 只适用于inline、inline-block元素，也就是说对于block元素并没有基线对齐这一说。所以设置:  img{display:block;}, 其实反推图片块状化了之后 ，设置 text-align: center;图片也自然不会居中了!  这时居中图片应该使用块元素居中的办法了!比如给图片设置 : margin: 0 auto; 居中等等...

2. 图片底线对齐 img{vertical-align:bottom;}

3. 行高足够小，使基线上移 .box{line-height:0}

line-height行高总结

行高（line-height）：就是包括内容区与以内容区为基础对称拓展的空白区域(也就是上下半行距) 加起来的总和，我们称之为行高

给行元素(内联元素)设置line-height后,  行内框(内联元素盒子) 撑开了行框  ,  而行框又撑开了内容区域、而内容区域撑开了包含元素也就是最外层的包含块!

撑开的部分平均分布在上下两侧就是行距  !  

而行高 就是 内容区域+ 两侧行间距  就是 = 行高

大家的支持就是我坚持下去的动力!