前端切图问题

Question

前端在根据UI给的标注图切图的时候，经常会遇到这样的问题：
标注要求两行文字间距是30px，但是我们在写css的时候不能直接用margin-bottom：30px, 因为文字有line-height，文字并不是紧贴着占位框，我们设的marginpadding并不是实际显示出来的间距。如果UI要求精确点，一般都是用尺子量。这种情况我们怎么写能更高效呢？

Answer 1

ps里不也有行高吗

Answer 2

Well，这个问题也曾经困扰我很久，最终我也没能找到全自动化的傻瓜式解决方案。
但是我还是使这个问题得到了改善。
因为同一站点使用的CSS Reset一般是不会改变的，所以我根据自己公司产品的情况制作了一张对照表。
在布局的时候作为参考，这样问题改善了一些，嘿嘿。

Answer 3

如果有設計稿，在cc之後的ps版本選擇移動工具，按住ctrl(cmd)把鼠標移動到需要的位置，ps會給出這兩個元素之間的距離，用微軟雅黑字體，標題用h2~h6標籤上下會多出一個像素空白，用p標籤會多出4像素空白，再配合line-height就可以得出比較精確的結果。
設計都是磨人的小妖精，樓主加油

Answer 4

直接全部写line-height，简单有疗效。

Answer 5

我在工作中主要有2种方式

第一种：

如果两行分别在两个元素里且每个元素只能有一行，这种情况其实很常见

例如：

<h1>这是文章title</h1>
<p>这是一行简介</p>

如果设计图标注的title和简介之间的间距是20px，

那么这样写：

h1,p{
 /*设为1，保证上下没有间距*/
 line-height:1;
}
p{
 margin-top:20px;
}

第二种：

如果一个元素内有多行，可以大致地进行计算

例如：字体大小是16px，line-height是1.5，那么行高是(16 x 1.5) = 24px

然后 ( 24 - 16 ) / 2 = 4px

示意图如下：行高为24px，但是字体本身大小是16px，由于上下间距是均分的，可知上下间距是4px

           | ------
           |  |4px
行高为24px  |    字体大小是16px
           |  |4px
           | ------

所以，如果两个元素之间的距离20px，由于上下已经有了4px的间隔，然后设置margin-top:16px即可。

注意：上面说了，是大致计算，这是为什么呢？因为文字的上下间距跟font-size有关，也跟字体有关，但是这样计算，忽略了字体的影响，只考虑了font-size，所以有时候可能会有一点儿误差。。