快速上手
间距（Spacing）是界面设计中平衡视觉层次的关键。首先，确定基准间距单位（如4px或8px），然后使用HeronTool的Spacing Scale（间距比例） 工具生成比例序列，如4、8、12、16、24、32、48px。这些数值将作为你设置内外边距的依据。
调整内边距与空白
在Spacing Scale中，你可以选择不同倍率（如1x、2x、3x）快速生成间距值。以卡片组件为例：外层使用16px内边距让内容呼吸，按钮之间用8px间距保持紧凑。空白区域（如段落间距）建议使用较大比例（24px以上），防止拥挤。
实战步骤
- 打开Spacing Scale工具，设置基准单位与倍数。
- 复制生成的间距值到CSS变量中，统一管理。
- 在布局中应用：元素外边距用中等比例，内边距用小比例，大块空白用大比例。
- 使用浏览器开发者工具实时预览，微调数值直到视觉平衡。
常见问题
- 问：间距需要统一吗？ 建议遵循比例系统，但可针对组件微调。
- 问：如何避免间距失控？ 始终使用预定义刻度，避免随意输入。
- 问：响应式设计怎么办？ 利用CSS clamp()函数结合比例值，实现动态缩放。
文章标签
