Figma设计稿标注导出后，怎么在Vue里精准还原间距和字体？
我从Figma导出了设计稿的间距和字体标注（比如 padding: 24px, font-size: 16px），但在Vue组件里写出来总觉得对不齐，视觉上明显有偏差。是不是单位或者盒模型的问题？
我试过直接复制数值，也检查了有没有全局样式干扰，但还是不对。下面是我写的组件片段：
<template>
<div class="card">
<h3 class="title">示例标题</h3>
<p class="desc">这是描述文字</p>
</div>
</template>
<style scoped>
.card { padding: 24px; }
.title { font-size: 16px; margin-bottom: 8px; }
.desc { font-size: 14px; line-height: 1.5; }
</style>但实际渲染出来跟Figma预览差了一截，特别是行高和上下间距，到底漏了啥？
1 条解答
先说最可能的原因：你没重置h3和p的默认margin。浏览器对标题和段落有默认的上下margin，这个会跟你写的margin-bottom叠加或者产生margin折叠，实际间距就跟你想的不一样了。
还有一点，Figma里的line-height跟CSS的line-height计算逻辑不太一样。Figma显示的可能是具体像素值，但CSS的line-height是倍数。你写的line-height: 1.5在font-size: 14px时实际行高是21px，但Figma那边可能标的是24px或者其他值。
改一下你的代码：
我的经验是，打开Figma的时候注意看它标注的具体是哪个位置到哪个位置的间距，有时候它标的是元素底部到另一个元素顶部的实际距离，但CSS里两个元素的margin会折叠，你得手动算一下。
还有一个偏方：直接在浏览器里用开发者工具量一下Figma的预览截图，对比你写的样式，哪里不对改哪里。虽然土，但最有效。