css基线粗鲁,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 自然也是负数，只是上下两端从增加等量空间变为减少等量空间而已。如下例子：

x