Spacing

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

Spacing Scale

Where property is one of:
m -	for classes that set margin
p -	for classes that set padding
Where sides is one of:
t -	for classes that set margin-top or padding-top
b -	for classes that set margin-bottom or padding-bottom
l -	for classes that set margin-left or padding-left
r -	for classes that set margin-right or padding-right
x -	for classes that set both -left and -right
y -	for classes that set both -top and -bottom
blank -	for classes that set a margin or padding on all 4 sides of the element

Where size is one of:	rem	px
`$spacer * 0`	0	0
`$spacer * 1`	0.125	2
`$spacer * 2`	0.25	4
`$spacer * 3`	0.375	6
`$spacer * 4`	0.5	8
`$spacer * 5`	0.75	12
`$spacer * 6`	1	16
`$spacer * 7`	1.375	22
`$spacer * 8`	1.5	24
`$spacer * 9`	1.625	26
`$spacer * 10`	2	32
`$spacer * 11`	2.5	40
`$spacer * 12`	3	48
`$spacer * 13`	4	64

Padding & margin best practice

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

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

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

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

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

Content

Space Tools