Figma设计稿里的间距怎么精准还原到React组件里？
我从Figma切图时看到按钮上下padding是12px，左右是16px，但写进React组件后总觉得对不齐，视觉上明显比设计稿挤。是不是单位或者盒模型的问题？
我已经确认了没用margin干扰，也检查了字体大小一致，但就是差那么一点。试过用Chrome DevTools量尺寸，发现实际渲染的padding确实和代码写的不一样，很奇怪。
const Button = () => {
return (
<button
style={{
padding: '12px 16px',
fontSize: '14px',
lineHeight: '1.5',
border: 'none',
borderRadius: '8px',
backgroundColor: '#007AFF',
color: 'white'
}}
>
确认
</button>
);
};1 条解答
第一个问题，你的
line-height: 1.5写法有问题。Figma 里的行高通常是固定像素值，比如 20px 或 22px，而不是相对值。你写 1.5 的话，实际渲染出来的行高是 14 × 1.5 = 21px。但 Figma 设计师可能设置的是 20px 或其他值，这 1px 的差异在视觉上就会显得"挤"。第二个问题，button 元素有浏览器默认样式。不同浏览器对 button 的默认 padding、border 渲染不一样，你虽然写了
border: 'none'，但有些浏览器还会残留默认行为。第三个问题，也是最容易被忽略的，Figma 文字图层本身有"文字框"的概念。设计师在 Figma 里画按钮时，文字框的高度和文字实际占据的高度可能不一致，导致你量的 padding 值其实是包含了文字框多余空间的。
具体来说，我建议这样排查和修复。
先打开 Figma，选中按钮里的文字图层，右侧面板看 Line height 是多少。如果是固定值比如 20px，那你 CSS 里也要写成
lineHeight: '20px'，不要用 1.5 这种相对值。然后检查一下设计师量 padding 的方式。有些设计师习惯从文字框边缘量到按钮边缘，而不是从文字本身的视觉边缘量。这种情况下，你需要在 CSS 里补偿这个差值。
给你一个更稳妥的写法：
加了
display: 'inline-flex'配合alignItems: 'center'，文字的垂直居中就不再依赖 line-height 的"撑开"效果了，而是真正的居中对齐。这种方式下，你设置的 padding 就是你实际得到的 padding，不会受文字渲染差异干扰。还有个验证方法。你在 Chrome DevTools 里选中这个 button 元素，看 Computed 面板里的
padding-top和padding-bottom实际计算值是多少。如果和你写的不一样，说明有其他样式覆盖了，往上找找是哪个 CSS 规则。如果一样，那就量一下按钮总高度，减去 padding 再减去文字高度，看看中间的差值是不是 line-height 的问题。对了，还有个坑。如果你的项目用了 normalize.css 或者其他 CSS reset，可能会影响 button 的默认行为。建议在 DevTools 里把 element.style 直接改成你要的值，看看能不能对齐，能对齐的话就是样式优先级问题。
最后说一句，Figma 和浏览器的文字渲染引擎本身就有差异，同一个字体、同一个字号、同一个行高，渲染出来的效果也会有细微差别。这种情况下，我一般会跟设计师沟通，确认 1-2px 的误差是否在可接受范围内，而不是死磕像素级完美。