FOUNDATIONS · SPACING

间距与边距 Spacing and Margins

间距阶梯共 17 档(space-0 → space-1000),包含 4–40px 每 4px 一档,并保留 0px、2px、6px 与大尺寸刻度。gap、padding、margin 共用同一套 space Token;标尺按真实像素渲染。

间距阶梯 space · 17

Token 名称间距示例
space-00px
space-0252px
space-0504px
space-0756px
space-1008px
space-15012px
space-20016px
space-25020px
space-30024px
space-35028px
space-40032px
space-45036px
space-50040px
space-55044px
space-60048px
space-80064px
space-100080px

使用场景 usage · 3

组件内间距 Component spacing

控件内部元素之间用 space-050 / space-075 / space-100:图标与文字 4px、行内元素 6–8px;进入更紧的复合控件(输入框内部)才用 space-025。

页面留白 Page spacing

区块与卡片之间用 space-200 / space-300;页面级大分区(表单分组、章节)用 space-400 / space-500,与悬浮层内边距同源。

外边距 Margin

margin 只用于同级元素之间的推挤;组件内部的贴边用容器的 padding。gap、padding、margin 统一引用 space Token,避免子元素各自带 margin 造成叠加漂移。