《CSS世界》读书笔记：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中“行距的上下等分机制”，如果行距的添加规则是文字的上方或者下方，则