# 间距与网格规范

## 8px 基准间距体系

间距值均为 8px 的倍数（或半倍数）：

| Token | px | rem | 适用场景 |
|:------|:---|:----|:---------|
| spacing-0 | 0 | 0 | 无间距 |
| spacing-1 | 2px | 0.125rem | 微间距（图标与文字） |
| spacing-2 | 4px | 0.25rem | 紧凑间距（标签间距） |
| spacing-3 | 8px | 0.5rem | **基础间距**（内边距基础） |
| spacing-4 | 12px | 0.75rem | 内容与容器边缘 |
| spacing-5 | 16px | 1rem | 卡片内边距/列表间距 |
| spacing-6 | 20px | 1.25rem | 段落间距/表单间距 |
| spacing-7 | 24px | 1.5rem | 组件间距/区块间距 |
| spacing-8 | 32px | 2rem | 板块间距/大间距 |
| spacing-9 | 40px | 2.5rem | 章节间距 |
| spacing-10 | 48px | 3rem | 页面级间距 |
| spacing-11 | 56px | 3.5rem | 超大间距 |
| spacing-12 | 64px | 4rem | 极限间距 |

> 原则：优先使用 8px 倍数间距，偶尔使用 4px 做微调。避免使用奇数间距。

## 栅格系统

### 网页端栅格（12列）
| 断点 | 容器宽度 | 列宽 | 间距 | 边距 |
|:----|:---------|:----|:----|:-----|
| < 768px | 100% | 自适应 | 16px | 16px |
| ≥ 768px | 720px | 48px | 24px | 24px |
| ≥ 992px | 960px | 56px | 24px | 24px |
| ≥ 1200px | 1140px | 72px | 24px | 24px |
| ≥ 1600px | 1440px | 96px | 24px | 24px |

### 移动端栅格（4列）
| 屏幕宽度 | 间距 | 边距 |
|:---------|:----|:-----|
| 320–374px | 8px | 16px |
| 375–414px | 8px | 16px |
| ≥ 415px | 12px | 24px |

## 内边距规则

| 元素 | 内边距 |
|:----|:-------|
| 页面容器 | 24px（桌面）/ 16px（移动） |
| 卡片 Container | 16px / 24px |
| 模态框内容 | 24px |
| 表格单元格 | 8px 16px |
| 输入框 | 8px 12px |
| 按钮 | 水平 16px / 垂直 4px–8px |
| 列表项 | 8px 16px |
| 标签/Badge | 4px 8px |

## 布局层级（Z-Index）

| 层级 | 值 | 元素 |
|:----|:---|:-----|
| Base | 0 | 页面内容 |
| Sticky | 100 | 粘性定位元素 |
| Dropdown | 200 | 下拉菜单 |
| NavBar | 300 | 导航栏 |
| Modal Backdrop | 400 | 模态遮罩 |
| Modal | 500 | 模态框 |
| Notification | 600 | 通知/提示 |
| Tooltip | 700 | 提示工具 |
| Loading | 800 | 加载遮罩 |
| Max | 9999 | 最高优先级 |