Version
has been released! Read the upgrade guide

Spacing

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Spacing is a key (and often overlooked) aspect of ensuring your application is easy to read and understand. Too little whitespace will cause components to become visually cramped, therefore decreasing readability. The general rule is to start with whitespace that is too large for an element and then decrease it until it is at an appropriate size. It is far better to have too much whitespace than too little.

1Dense User Interfaces

Sometimes interfaces (particularly dashboards or data heavy components) need to have a more condensed UI to ensure all information is presented to the user. This is a tradeoff with readability, so try to use this sparingly.

2The Spacing Scale

By reducing application Spacing to a predetermined scale, it is easy to ensure all elements and components are spaced in proportion to each other, rather than with arbitrary values.

The Spacing Scale values, much like the Typography Scale values, doesn't increase in a linear fashion. This is because as elements get positioned further apart, the difference between adjacent values becomes less noticeable. Whilst the Scale values itself increases non-linearly, the Scale is linear. This is to help developers quickly adjust spacing, without having to worry about the underlying Spacing API values.

ScaleSizepx value
10.125rem2px
20.25rem4px
30.375rem6px
40.5rem8px
50.625rem10px
60.75rem12px
70.875rem14px
81rem16px
91.125rem18px
101.25rem20px
111.5rem24px
122rem32px
132.5rem40px
143rem48px
154rem64px
165rem80px
176rem96px
188rem128px
199rem144px
2010rem160px
px1px-
full100%-

3Using the Spacing Scale

To help use the Spacing scale, there is a handy SCSS function provided: spacing(). This function accepts one parameter, the Scale value:

1padding: spacing("4");
2// Result
3padding: 0.5rem;

Utility Classes

The CSS Frameworks Spacing Variables are available in Utility Class form, allowing components to be quickly positioned and manipulated without having to jump into the CSS. All Utility classes are prefixed with the namespace .rn_. This is to prevent them clashing with any custom styles you author.

Both margin and padding can be set via Utility classes. The class syntax follows this pattern:

.rn_[Property][Direction?]-[Size]

PropertyDirectionSizeValue
m marginall10.125rem
p paddingt top20.25rem
r right30.375rem
b bottom40.5rem
l left50.625rem
x x-axis60.75rem
y y-axis70.875rem
81rem
91.125rem
101.25rem
111.5rem
122rem
132.5rem
143rem
154rem
165rem
176rem
187rem
198rem
209rem
px1px
full100%

For example, adding a class of .rn_mt-10 would result in the following:

margin-top: 1.25rem;

To use the Utility classes in conjunction with media queries, add the required breakpoint to the Utility class:

.md:rn_mt-10

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright