像素级还原设计稿之-css属性line-height你有注意过吗

前言

我们知道设计图都是按照不同的功能块进行布局的，这里面有一种常见情况，就是利用标题的形式进行内容分区。我们以下面的截图为例来引出问题，图片中部为你推荐这个标题下面有一个导航条，导航条和文字的布局如果通过margin-top属性来处理的话，我们应该将margin-top值设置为多少呢？

要回答这个问题，我们不得不考虑一个影响因素-行高，行高会影响文本所占空间的大小，这些空间如果没有被正确的处理，那么会影响到我们最终的设计图还原出来的效果。

在开始正文之前我们先把基础概念给捋一捋，如果您是老鸟请直接滑到下面看结论，文中如有不对的地方还请各位斧正。

定义

line-height意为行高，字面理解即为文本行的高度，如果你想去测量一下这个高度，那么它的测量依据是什么呢？两行文本基线之间的垂直距离，那问题又来了，什么是基线呢？

基线是什么

基线是英文单词书写场景下的一个概念，在四线三格中，倒数第二条线即为基线（Base Line），如下图。

行距和半行距

知道了行高和基线之间的关系之后，我们还要理清另外一个概念-行距，这对我们还原设计稿很重要。
行距即文本行之间的垂直距离，它的计算公式是：

行距 = 行高 - 字体大小

举个例子🌰
字体大小20px，line-height值为1.5，那么现在这行文本的高度为20px * 1.5 = 30px
行距 = 30px - 20px = 10px
半行距即为5px

结论

我们要对导航条和标题布局，这里就要分两种情况了：

• 如果当前标题line-height值为1，那我们的取值就是导航条白底的顶部到标题的底部之间的距离（如上图箭头标注位置）。
• 如果我们设置的line-height值不为1，因为此时文字存在行高，有行高就会有行距，行距会等分的排列在文字的上下两边，此时我们布局的时候就应该将两者之间的距离再减去半行距。

字体大小	line-height取值	设计图上导航条和标题的实际距离	margin-top取值
20px	1	30px	30px
20px	1.5	30px	25px

上面的表格是line-height取值的一个对比，当line-height取值1.5时，如果我们还是将margin-top值设置为30px，这时候加上半行距，标题和导航条之间的距离是35px，就会和设计图存在5像素的偏差。

以上所述内容是高保真还原设计图时的一个小细节点，如果对你有帮助，还请点个赞呦！