How do you make spacing and sizing consistent?
Use a small, regular set of distances and sizes to show relationships and keep parts usable.
Spacing rules provide reusable choices for the empty space between content. They help readers see which items belong together and where the next section begins.
Keep these basics in mind
- A spacing scale is an agreed set of distances, such as compact, regular, and generous. A regular set makes reuse easier.
- Padding is the distance from a component’s edge to its contents. A gap is the distance between parts.
- Related items are usually closer together, with more space between groups. Space communicates relationships as well as appearance.
- Sizes must accommodate text, interaction areas, and content changes. Do not squeeze content out simply to make things align.
See Spectrum’s layout spacing guide for relationships and layout. Graphic Design: The New Basics includes grouping, hierarchy, and grids as foundational topics.
Arrange spacing
Illustrative spacing changes
These numbers are teaching examples. px means a CSS pixel used in web layout, rather than a physical device pixel.
| Location | Previous arrangement | Example spacing |
|---|---|---|
| Label to input | As large as the space between groups | 8px |
| Between fields | Each field uses a different distance | 16px |
| Between form groups | Same distance as between fields | 32px |
Walk through an example
Every row in a contact form has different spacing. The team groups each label with its input, then groups the name and email fields as related information. They try the example distances. If side-by-side fields become crowded in a narrow browser, they stack them while preserving the grouping.
Limits and common misunderstandings
Not every size must be a multiple of eight. Text, borders, and small icons may need other values. Regularity supports reading and operation; the exact scale can vary. Explain exceptions rather than adding arbitrary values.