前端在根据UI给的标注图切图的时候，经常会遇到这样的问题：
标注要求两行文字间距是30px，但是我们在写css的时候不能直接用margin-bottom：30px, 因为文字有line-height，文字并不是紧贴着占位框，我们设的marginpadding并不是实际显示出来的间距。如果UI要求精确点，一般都是用尺子量。这种情况我们怎么写能更高效呢？
Well，这个问题也曾经困扰我很久，最终我也没能找到全自动化的傻瓜式解决方案。
但是我还是使这个问题得到了改善。
因为同一站点使用的CSS Reset一般是不会改变的，所以我根据自己公司产品的情况制作了一张对照表。
在布局的时候作为参考，这样问题改善了一些，嘿嘿。
如果有設計稿，在cc之後的ps版本選擇移動工具，按住ctrl(cmd)把鼠標移動到需要的位置，ps會給出這兩個元素之間的距離，用微軟雅黑字體，標題用h2~h6標籤上下會多出一個像素空白，用p標籤會多出4像素空白，再配合line-height就可以得出比較精確的結果。
設計都是磨人的小妖精，樓主加油
我在工作中主要有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，所以有时候可能会有一点儿误差。。
直接全部写line-height，简单有疗效。
ps里不也有行高吗