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:


Form with two empty required text input fields: Name on card and Card number. Image shows 16 pixel spacing between 'Name on card (required)' label and empty text input field below it. It then shows 40 pixel spacing between the empty text input field and 'Card number (required)' text. It also shows 16 pixel spacing between 'Card number' (required label and the empty text input field below it.

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.

size top right bottom left
0 ontario-padding-top-0-! ontario-padding-right-0-! ontario-padding-bottom-0-! ontario-padding-left-0-!
4 ontario-padding-top-4-! ontario-padding-right-4-! ontario-padding-bottom-4-! ontario-padding-left-4-!
8 ontario-padding-top-8-! ontario-padding-right-8-! ontario-padding-bottom-8-! ontario-padding-left-8-!
12 ontario-padding-top-12-! ontario-padding-right-12-! ontario-padding-bottom-12-! ontario-padding-left-12-!
16 ontario-padding-top-16-! ontario-padding-right-16-! ontario-padding-bottom-16-! ontario-padding-left-16-!
24 ontario-padding-top-24-! ontario-padding-right-24-! ontario-padding-bottom-24-! ontario-padding-left-24-!
32 ontario-padding-top-32-! ontario-padding-right-32-! ontario-padding-bottom-32-! ontario-padding-left-32-!
40 ontario-padding-top-40-! ontario-padding-right-40-! ontario-padding-bottom-40-! ontario-padding-left-40-!
48 ontario-padding-top-48-! ontario-padding-right-48-! ontario-padding-bottom-48-! ontario-padding-left-48-!
64 ontario-padding-top-64-! ontario-padding-right-64-! ontario-padding-bottom-64-! ontario-padding-left-64-!

Margins

size top right bottom left
0 ontario-margin-top-0-! ontario-margin-right-0-! ontario-margin-bottom-0-! ontario-margin-left-0-!
4 ontario-margin-top-4-! ontario-margin-right-4-! ontario-margin-bottom-4-! ontario-margin-left-4-!
8 ontario-margin-top-8-! ontario-margin-right-8-! ontario-margin-bottom-8-! ontario-margin-left-8-!
12 ontario-margin-top-12-! ontario-margin-right-12-! ontario-margin-bottom-12-! ontario-margin-left-12-!
16 ontario-margin-top-16-! ontario-margin-right-16-! ontario-margin-bottom-16-! ontario-margin-left-16-!
24 ontario-margin-top-24-! ontario-margin-right-24-! ontario-margin-bottom-24-! ontario-margin-left-24-!
32 ontario-margin-top-32-! ontario-margin-right-32-! ontario-margin-bottom-32-! ontario-margin-left-32-!
40 ontario-margin-top-40-! ontario-margin-right-40-! ontario-margin-bottom-40-! ontario-margin-left-40-!
48 ontario-margin-top-48-! ontario-margin-right-48-! ontario-margin-bottom-48-! ontario-margin-left-48-!
64 ontario-margin-top-64-! ontario-margin-right-64-! ontario-margin-bottom-64-! ontario-margin-left-64-!

Help improve this page

If you have suggestions, advice or any questions about spacing, or need custom spacing for your design the design system team would love to hear from you.