css line-height 用法详解

line-height 是css 提供的一种用来设置行间间距的属性.

基本概念

我们先梳理下文本排版的时候的几个基本概念

顶线，中线，基线，底线

上图中，3对应的那条线就是文本的所谓的基线。文字的字体不同，基SEO靠我线相对于文字的位置会略有偏差。

这个是不是和我们学习英语的时候用的英语本（下图）一样，实线就是基线，

最上面的虚线就是顶线，最下面的虚线就是底线，基线上面的那条线可以看成是中线。

字体高度，行高，行距，半行SEO靠我距

字体高度就是顶线到底线的距离,我们，一般字体高度会大于或者等于字体大小，不同的字体会有差异。下图中我们虽然把字体设置为20px，但是字体区域的高度却是28px。

行高就是line-height对应的值SEO靠我，行高是两行文本基线之间的距离

行距是两行文本之间第一行的底线到第二行顶线的距离

由此我们可以推断出计算公式

行距 = 行高- 字体高度

半行距：行距/2，我们上面说了行高是两行文本的基线的距离，那如果只有一SEO靠我行文字，行高从何说起呢？

观察下面第一个截图，span里只有一行文字

字体高度是28px

行高是 4*20px = 80px;

观察下面第二个截图：div的高度等于内部span的行高 80px

那在div和spSEO靠我an之间的上下空白区域的高度是多少的？

其实就是半行距 = （80-28）/2 = 26px，在单行文本下，文字高度+上面的半行距+下面的半行距 等于行高

截图1:

截图2:

内容区，行内框，行框，

内容区的高SEO靠我度是由上述字体高度决定的, 如下图span的28px

行内框默认等于内容区域，除非设置了padding。

行框是一行区域渲染的一个框模型，由其内部行内元素的行高line-height决定，比如下图2divSEO靠我高度20px，是由于他内部的span的line-height为1，也就是20px。（注意div上加了font-size:0 是为了排除block元素内部隐藏文本的默认行高对实验的干扰），这个问题另外文SEO靠我章再做分享。

line-height常见用法

值说明数字比如1.5 转换的值就是 font-size 的1.5倍百分比比如 200% 转行成行高就是 font-size 的两倍长度比如 80px 对应的行SEO靠我高就是80pxinherit直接集成父级的行高normal默认值，不同的浏览器略有差异

百分比和数字的差别：

从说明的内容来看，好像没有什么区别

但是其实他们再父子继承这块是有本质不同的，看下面的对比类别值SEO靠我父子百分比200%line-height=父font-size * 200%line-height=父font-size * 200%数字2line-height=父font-size * 2lineSEO靠我-height=子font-size * 2

注意事项

line-height 在行内元素和块级元素作用区别

line-height 本身只会影响行内元素的行高，理论上对块元素不起作用，但是别忘了，通过上面SEO靠我的实现发现他会影响块级元素的height。line-hieght 对替代元素作用的区别

替换元素：图片，iframe以及video之类的由加载资源决定显示尺寸的元素

理论上line-height 和图片之SEO靠我间没有什么关系，但是有一点，图片在行内会和文本的基线对齐，会在图片底下出现一定的间距。因为图片的底部默认是和文字的基线对齐的，基线底下还有底线和半行距。所以空隙就产生了。

解决方法就是把通过verticSEO靠我al-align：bottom 来让图片底部和文字的行框底部对齐。

图片参考：

https://blog.csdn.net/weixin_40851188/article/details/89428749SEO靠我