# Spacing

## Use two gaps

<!-- rule: two-gaps -->

**Rule:** Use the inner gap between parts of one group and the group gap between groups.

**Why:** Two distances show what belongs together, and a reader never has to compare a third.

**Do:** Treat a control row and the table it filters as one group.

**Don't:** Add a third distance between sections.

## Widen inner gaps on a touch phone

<!-- rule: two-gaps-phone -->

**Rule:** On a touch phone, match inner gaps to the chip rows' gap.

**Why:** Chip rows open for a finger, so a smaller gap joins the table to the last row.

**Do:** Move the table down with the chips.

**Don't:** Keep the table's desktop gap.

**Except:** The view strip stays tight, because its tabs meet the floor.

## Keep a title on its block

<!-- rule: title -->

**Rule:** Keep a page or card title one inner gap above what it names, at every width.

**Why:** With space on both sides, a title can belong to either block.

**Do:** Hold a card's title to its first line.

**Don't:** Float a title halfway between two groups.

## Put text on the column edge

<!-- rule: text-edge -->

**Rule:** A control that draws no box starts its first label on the page title's edge.

**Why:** With nothing drawn around it, an indented label reads as a misaligned line.

**Do:** Let the view strip's highlight and ring hang into the margin.

**Don't:** Move a filter chip or a table off the column edge.