Spacing

Guiding principle: Be consistent

About this component

Spacing is the distance between elements on a page.

We use two types of spacing:

• Padding is how much extra space there will be within an element.
• Margins are how much extra space there will be surrounding an element.

Spacing is built in to components

We’ve given each element in the design system a default set of padding and margins that works with our 8-pixel spacing grid and should generally work well on any page or layout, without modification.

Generally, an element will have a 40px margin below it by default. Labels will have a 16px margin below, to closely link the label with its associated form element. See example below:

Example

---

Override classes

If the default spacing for a specific element doesn’t work with your design, you can use override classes to customize the spacing.

Use override classes to apply padding and margins separately to any side of any element.

Only use override classes for spacing if the default spacing around an element causes problems for your design.

Override class guidance

Ideally, align your spacing to an 8-pixel grid – meaning all of your spacing amounts are a multiple of 8 pixels.

If an 8-pixel grid does not work, you can use a 4-pixel grid – this may be the case when you’re aligning icons.

Generally, add space to the bottom of elements, not the top. This will help them flow better on different screen sizes.

There are separate classes for padding and margins. Use the override classes as indicated in the following chart.

Padding

When possible, use spacing variables that are multiples of 8. These are preferred over multiples of 4.

Margins