Space
You might say
Everything feels piled together. Adjust the spacing so related things stay close and separate things have room.
Use empty space to show which things belong togetherRelated items should sit close together, while separate groups need more room between them. That empty room is spacing. A product usually defines a small spacing scale so pages follow a visible rhythm instead of using a new value each time.
You can say this to an AI Agent
Adjust the profile form spacing so labels stay close to their fields and separate field groups use a larger reusable gap. Do not position content with spaces or blank lines. Verify grouping with long labels and at mobile width.
When to use it
- Keep a label close to the field it describesNameAlex ChenEmailyou@example.com
- Separate one content group from the next
- Give text and controls enough room to breatheCancelSave
- Build a reusable spacing scale for the whole productSmallMediumLarge
When NOT to use it
- Choose a different spacing value for every element
- Use empty space to hide a weak information structureCancelSavePreview
- Leave related items farther apart than unrelated groups
- Add large gaps that force unnecessary scrollingPrice: ¥199Stock: 42 unitsUsing full-width spaces for alignment breaks when the font changes
Anatomy
The space between this card and other elements
The space between content and the card border
The distance between internal elements
Variants
Compact · 4px
Place small elements in the same group closer together, such as icons and text
Medium · 8px
Default distance between elements in the same group
Loose · 16px
When separate modules need clearer grouping.
Typical use cases
Form fields
Name
Email
The label is close to the corresponding input box, and the distance between different field groups is increased
Card content
Padding
Project activity
Alex Chen finished reviewing the homepage prototype
Keep the padding consistent on every side of the card
Page sections
Use consistent spacing to keep related buttons grouped and easy to scan
Navigation groups
Design review
Today, 2:00 PM · 3 attendees
Requirements alignment meeting
Tomorrow, 10:30 AM · 6 attendees
Release review
Friday 16:00 · All members
Use consistent vertical spacing so each row is easy to scan
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check
In a profile form, each label is far from its own field but crowded against the next label. Which adjustment best communicates grouping?
ANS Original Methods