间距体系生成
UpBox优盒工具箱，免费在线间距体系生成：给一个基准步长与倍率，立刻得到 11 级间距阶梯、每级对应的常见用途，以及可直接粘贴的 CSS 变量。
无需注册 · 数据不上传No sign-up · nothing uploaded
参数Setup
已生成
基准 8px 是最常见的 8pt 网格，列表与表单也能用 4px；倍数序列是 0、1、2、3、4、5、6、8、10、12、16，跳过了 7、9、11 这类不好对齐的值；外层倍率大于 1 时大间距会成比例拉开，适合偏松的排版
间距阶梯Scale
只在需要的地方引入间距变量，比到处写数字更容易统一；同一页面里字号与间距最好来自同一套阶梯，改起来只需动基准与倍率，不必逐处搜 replace
本工具所有运算在本地浏览器完成，你的文件、文本不会上传到服务器
工具介绍
页面看着不整齐，常常不是字体问题，而是间距随手写了 13px、18px、27px 这种对不齐的数；换成一套 8pt 阶梯后，肉眼能看出差别。 A layout that looks untidy is often not a type problem but spacing written as 13, 18 and 27px; switching to an 8pt ladder makes the difference visible.
给一个基准，阶梯、每级的用途和 CSS 变量一次出全，贴进项目里就能用。 Set a base and you get the ladder, what each step is for, and the CSS variables, ready to paste.
- 11 级阶梯11 steps
- 用途标注Use per step
- CSS 变量CSS variables
- 重复值检测Duplicate check
使用说明
- 填基准步长。Set the base step.
- 选外层倍率。Pick the outer ratio.
- 看阶梯与用途。Read the ladder.
- 复制 CSS 变量。Copy the variables.
常见问题
为什么基准常用 8px？Why 8px?
8 能被 2、4 整除，缩放到 1x、1.5x、2x 屏幕都不会出现半像素；4px 则适合信息密度更高的表格与表单。Eight divides by 2 and 4, so it holds up across 1x, 1.5x and 2x screens without half pixels; 4px suits denser tables and forms.
外层倍率是做什么的？What does the outer ratio do?
它按级数递增放大，级数越高放大越多，让大间距比小间距拉开得更明显，适合留白偏多的版式。It grows with the level, so large gaps spread more than small ones, which suits layouts with generous whitespace.
出现重复值要怎么办？What if steps duplicate?
说明倍率太小、相邻级别算出同一个像素。换成 1（等比步进）或把基准调大。That means the ratio is too small so adjacent levels round to one value; use 1 or raise the base.
能直接用于 Tailwind 吗？Can I use it with Tailwind?
可以，把变量名改成 Tailwind 的 spacing 键或粘贴到 theme.extend 里即可，本页只输出标准 CSS 变量。Yes, rename the variables to Tailwind spacing keys or paste them into theme.extend; this page only outputs standard CSS variables.