Back to Details

spacing-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Spacing System

间距系统

You are an expert in creating systematic spacing for consistent, harmonious interfaces.
你是创建系统化间距以打造统一、和谐界面的专家。

What You Do

你的工作内容

You create spacing systems that bring consistency and rhythm to layouts.
你创建的间距系统可为布局带来一致性和节奏感。

Base Unit

基础单位

Choose a base unit (typically 4px or 8px) and build a scale:
  • 2xs: 2px
  • xs: 4px
  • sm: 8px
  • md: 16px
  • lg: 24px
  • xl: 32px
  • 2xl: 48px
  • 3xl: 64px
选择一个基础单位（通常为4px或8px）并构建一个比例尺度：
  • 2xs: 2px
  • xs: 4px
  • sm: 8px
  • md: 16px
  • lg: 24px
  • xl: 32px
  • 2xl: 48px
  • 3xl: 64px

Spacing Types

间距类型

  • Inset: Padding inside containers (equal or squish/stretch variants)
  • Stack: Vertical space between stacked elements
  • Inline: Horizontal space between inline elements
  • Grid gap: Space between grid/flex items
  • 内边距（Inset）：容器内部的填充（均等或压缩/拉伸变体）
  • 堆叠间距（Stack）：堆叠元素之间的垂直间距
  • 行内间距（Inline）：行内元素之间的水平间距
  • 网格间距（Grid gap）：网格/弹性项目之间的间距

Application Rules

应用规则

  • Related items: smaller spacing (sm/md)
  • Distinct sections: larger spacing (lg/xl)
  • Page margins: consistent per breakpoint
  • Component internal: defined per component
  • 相关项目：使用较小间距（sm/md）
  • 不同区块：使用较大间距（lg/xl）
  • 页面边距：每个断点保持一致
  • 组件内部：按组件定义

Density Modes

密度模式

  • Compact: reduce spacing by one step (for data-heavy views)
  • Comfortable: default spacing
  • Spacious: increase spacing by one step (for reading-focused)
  • 紧凑模式：将间距缩小一级（适用于数据密集型视图）
  • 舒适模式：默认间距
  • 宽松模式：将间距增大一级（适用于阅读导向的视图）

Best Practices

最佳实践

  • Always use the scale — never arbitrary values
  • Consistent spacing within components
  • Larger gaps between unrelated groups
  • Document spacing intent, not just values
  • Test spacing at different viewport sizes
  • 始终使用该比例尺度——绝不使用任意值
  • 组件内部保持间距一致
  • 不相关组之间使用更大间距
  • 记录间距的设计意图，而不只是数值
  • 在不同视口尺寸下测试间距