CSS基线
line-height
行距、行间距
行距： 相邻文本行间 上一个文本行基线 和 下一个文本行基线 之间的距离。
行间距： 相邻文本行间 上一个文本行下行线 和 下一个文本行上行线 之间的距离。
行距 = 行间距 + 字体大小
在CSS中，CSS属性line-height则是用于设置真实的行距。从W3C Rec中看出，line-height就是行距，而line-height的字面意思即为“行高”，推导结果CSS中 行高即是行距。
了解了行高，行距，行间距。那么接下来介绍line-height的重要属性–垂直居中。
我们知道，行距(leading) = 行间距(line-space) + 字体大小(font-size)。行间距与字体大小都可以通过相应CSS属性设置，问题是行间距所占的空间是怎么分配的呢？
CSS采用的是将行间距对半开，然后分配到上下两端，这里引用了Half-leading的概念， Half-leading = 行距/2
由于行距可能为负值，可以知道行间距可能为负数，那么垂直居中还有效么？
答案是肯定的，行间距为负数时，Half-leading 自然也是负数，只是上下两端从增加等量空间变为减少等量空间而已。如下例子：
<div style="position:relative;top:100px;font-size:90px;line-height:10px;background:yellow;">
<span style="border:solid 1px red;line-height:10px;">x</span>
</div>
line-height属性
| 值 | 描述 |
|---|---|
| 可能值 | normal | <number> | <lenght> | <percentage> | <inherit> |
| 默认值 | normal |
| 继承性 | yes |
normal
对于normal，其实就是一个值，但是由浏览器决定，实际值一般在1.0~1.2之间（闭区间）
不同浏览器下，normal 不同；
同一浏览器下，font-size 不同，normal 也不同；
同一浏览器下，font-size 相同，font-family 不同，normal 也会变化。
normal 的平均值确实是 1.0~1.2(闭区间)，但是具体到特定浏览器、font-family 和 font-size时，normal值可能会大于1.2。
length
指定长度用于计算线盒高度，负值非法。
设置固定值，单位可以是 px 、pt 。
好处就是简单，设置是什么，line-height的实际高度就是什么。
坏处是子元素默认 继承 父容器的line-height，若子元素的font-size 大于 父容器的font-size，那么子元素的文本行会什么密集。
解决方案，一般是采用 相对 font-size 实际大小 来设置 line-height 值的方式，如默认 normal 方法。
percentage(%)
计算值是百分比乘以元素计算字体大小，负值非法。
值的注意的是，参考系的确是font-size，但子元素继承的是父容器的实际 line-height 值，也就是说父容器设置为 font-size:20px;line-height:200%;，子元素继承的line-height值为 40px，而不是 200% ，因此又回到了 方式 的问题了。
number
属性的使用值是 这个数字 乘以 元素的字体大小，负值非法，计算值与指定值相同。
和方式一样，以 font-size 为参考系，以相对值方式设置 line-height。
唯一不同的是，子元素继承的是父容器的值，参考系自动变为子元素的 font-size
line-height: 1.2em;
line-height: 1.2;
上门的两句其实是等价的，若想将参考系 改 为根元素的 font-size ， 需要CSS3的新增line-height:1.2rem;。
深入理解 line-height 和 vertical-align
本文地址：https://blog.csdn.net/qq_27875945/article/details/107499237