Spacing is an important, and often underestimated, part of the visual design within Inspire. The Spacing serves to make all distances within the modules look the same. The different spacings allow for flexible arrangement within the system.

The spacing can be used horizontally and vertically. It refers to padding, margin, but also to distances between the elements, the "spacing scale".

Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level designs.

Padding & margin spacing
Here are some representative examples of these classes.

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * 4) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Spacing Scale

Other Spacing 
There are a few other methods that can be used for spacing elements. Each has its own unique use case.
Here are some representative examples of these classes.

Example of spacing scale