间距
Space
初级通用间距（Space）是页面中元素与元素、元素与容器边缘之间留出的空间。它帮助你区分内容分组、安排阅读节奏，避免界面挤成一团；比如后台筛选栏里的输入框之间留出一致的距离。
你可能会说：「帮我把后台页面排得松一点：卡片之间留出距离，卡片里的文字也别贴着边。」
动手看看订单页的筛选栏
两种间距各管一层：控件间距分开同组里的输入项，分组间距分开「订单条件」和「查询时间」。
这里的 gap 只管子元素之间；筛选栏内容与外侧虚线框之间的距离由 padding 决定。
要点页面里的间距该从哪里看起？
- 1
先看哪些内容属于一组
你做设置页时，标签和对应的开关通常离得近一些，不同设置项之间则可以离得远一些。因为距离会暗示内容之间的关系，所以先分组，再决定留多少空间。
- 2
区分元素之间和内部的空间
两张卡片之间的空隙，与卡片边框到文字之间的空隙，不是同一处空间。前者影响卡片如何排列，后者影响卡片内容是否贴边。告诉 AI 具体是哪一处，修改才不容易跑偏。
- 3
让重复的距离保持一致
如果列表里的每一行都属于同一层级，我们通常给它们一致的间距。这样做的好处是，新增一行时不用重新猜距离，用户也能更快看出哪些内容属于同一种结构。
- 4
留意不同屏宽下的变化
桌面端三列卡片之间留出的空间，到了手机端可能要改成单列后的上下间距。你可以让 AI 同时检查窄屏：内容换行或列数变化后，间距是否仍然服务于分组和阅读。
容易混淆的地方
间距说的是界面里留出空间这件事，不是某一个 CSS 属性。内边距（padding）是元素内容与自身边界之间的空间；外边距（margin）是元素边界外的空间。比如卡片里的文字贴边，先看内边距；两张卡片挨得太近，则看它们之间的布局间隔或外边距。
什么时候用
适合用
- 做后台筛选区时，输入框和按钮挤在一起，需要调整它们之间的距离，让操作分组更容易辨认。
- 做商品卡片列表时，需要统一卡片内部的留白，以及卡片与卡片之间的距离。
- 把桌面端页面改成手机端布局时，需要重新检查换行后的元素间距。
不适合用
- 文字大小不一导致阅读顺序混乱时，主要改字号、字重和排版层级；单纯拉大间距解决不了重点不清。
- 两块内容需要明确的可见边界时，单靠留白可能不够；可以根据界面需要使用分割线或边框。
- 卡片排不成稳定的多列、窄屏还会错位时，先用网格或弹性布局安排结构，而不是靠加大空隙凑位置。
练一练选一个答案，看看解释
你在做 AI 工具的对话页：多条消息组成列表，每条消息内部有头像和文字。现在消息彼此挤得太近，但头像与文字的距离刚好。你会让 Agent 改哪里？
让 AI 帮你做复制给 AI Agent 直接用
请调整对话页的间距：增加消息列表中相邻消息之间的距离，保持头像与文字的现有距离；检查手机窄屏下换行后的效果，并沿用项目已有的间距变量或约定。