line-height
本文大部分内容摘自 张鑫旭的《CSS世界》,外加一些自己的理解。在此仅作学习记录,无商业用途。
1. 行距与半行距
- “行距”分散再当前文字的上方和下方,也就是即使是第一行文字,其上方也是有“行距”的,只不过这个“行距”的高度仅仅是完整“行距”高度的一半,因此,也被称为“半行距”。
- 行距 = line-linght - font-size
2. 半行距与精确的布局
在查看设计图的时候,我们经常可以看到某段文字的下方与某个元素的距离。这时候的距离往往是不包含半行距的,而我们使用padding或者margin直接设置设计图上的尺寸是不准确的。
如果需要做到精确的话。我们需要将标准值减去半行距。假设line-height: 1.5; font-size: 14px; 则:
标准值 - (14 * (1.5 - 1)) / 2
(当line-height: 1;时line-height == font-size的文字高度)
上述公式得出的结果即精确的距离值。
但是由于CSS属性并没有小数像素的概念。因此如果时文字的上边距,则向下取整;如果是文字下边距,则向上取整,因为绝大多数的字体在内容区域中都是偏下的。而上述得出的结果是3.5px,我们向上取整是4px。
3. 为什么line-height可以让内联元素“垂直居中”?
行高可以实现“垂直居中”原因在于CSS中“行距的上下等分机制”,如果行距的添加规则是文字的上方或者下方,则行高是无法让文字垂直居中的。
4. 使用line-height实现多行文本"垂直居中"
<s