设计与配色

CSS间距比例

CSS间距比例 — 指定尺寸或颜色,查看代码或结果. 输入指南: 底, 数量. 无需账号.

无需账号

正在加载工具…

使用方法

  1. 1输入指南: 底, 数量.
  2. 2运行工具并查看结果。
  3. 3复制结果 / 保存结果文件.

使用提示

请检查输入范围和单位。结果取决于您的输入和浏览器。

广告可能处理连接数据,个性化遵循您的隐私选择。 隐私说明(英语)

实际输入与输出示例

以下结果由此工具的实际引擎使用示例值计算,不使用个人输入或已保存工作。可在工具中载入示例查看相同输入。

示例输入

字段值
底
4
数量
8

示例结果

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
}
输入条件

以下为实际输入验证范围,并不保证所有允许值都符合现实或适用于您的情况。

  • 底: 允许范围: 0.000000001 ≤ x ≤ 1,000,000,000,000
  • 数量: 允许范围: 1 ≤ x ≤ 32 · 仅整数

相关工具

全部工具