THE DESIGN LAB

设计，动手就懂。

改变一个变量，观察一个结果。把看过的原则，变成自己的直觉。

EXPERIMENT 02 / SPACING

不加边框，怎样让两组内容分开？

SPACE IS A RELATIONSHIP

标签与内容的距离8px

4px28px

两个分组的距离32px

4px56px

把组内间距调得比组间更大，看看原本清楚的归属会怎样变化。

LIVE PREVIEW 实时示例

项目设置 · 界面示意

项目名称

我的设计练习

项目说明

每天观察一个界面，改进一个细节。

组内 8px组间 32px

观察一下

标签更靠近它所属的内容，两个分组之间距离更大。没有额外边框，你也能看出结构。

IMPLEMENTATION NOTE

.field { display: grid; gap: 8px; }
.form-fields { display: grid; gap: 32px; }

接下来，看看完整界面如何运用这些原则。