UI设计师如何正确给前端标注行高？

Question

UI设计师如何正确给前端标注行高？

Answer 1

首先，行高不能设为1，因为设为1之后，有可能中文会被截取，显示不完整。
bootstrap为了统一浏览器之间的行高差别，设置的是1.47....，但是，实际中，这个值并不好计算，建议line-height:1.5，这样便与计算，差别也不会很大。
比如，设计稿的上边距是20px，字体大小为12px，那么我们代码的实现就应该是font-size:12px;margin-top:17px;
为什么是17px呢，因为行高为1.5，所以超出了0.5*12为6px，上边超出了6/2=3px，20-3=17px;

熟练之后直接边距 - 字体大小/4就行了

Answer 2

line-height:1;

不用单位就表示 1em

多行的话

line-height:1.5;margin:-0.25em 0;

用 margin 把上下多的行高去掉