Spacing
The Design System uses two different spacing scales – responsive and static.
Responsive spacing
The responsive spacing scale adapts based on screen size.
The spacing for ‘large screens’ is used when the screen is wider than the tablet breakpoint (640px). Spacing for the smallest units (0-3) stays the same for all screen sizes.
Spacing unit | Small screens | Large screens |
---|---|---|
0 | 0 | 0 |
1 | 5px | 5px |
2 | 10px | 10px |
3 | 15px | 15px |
4 | 15px | 20px |
5 | 15px | 25px |
6 | 20px | 30px |
7 | 25px | 40px |
8 | 30px | 50px |
9 | 40px | 60px |
Static spacing
The static spacing scale stays the same for all screen sizes, and uses the same spacing as ‘large screens’ in the responsive spacing scale.
Spacing unit | All screens |
---|---|
0 | 0 |
1 | 5px |
2 | 10px |
3 | 15px |
4 | 20px |
5 | 25px |
6 | 30px |
7 | 40px |
8 | 50px |
9 | 60px |
Applying spacing in your own CSS
If you want to reference the spacing scale in your CSS, use the spacing helpers.
Using the responsive spacing helper
To use the responsive spacing scale, include the govuk-responsive-margin
or govuk-responsive-padding
mixins.
For example, to apply spacing unit 6 for 30px padding on large screens and 20px on small screens, use:
@include govuk-responsive-padding(6);
You can also add an argument to apply margin or padding in a single direction.
For example, to apply spacing unit 6 for a 30px bottom margin on large screens and a 20px bottom margin on small screens, use:
@include govuk-responsive-margin(6, "bottom");
Using the static spacing helper
For the static spacing scale, use the govuk-spacing
function.
For example, to apply spacing unit 6 for 30px top padding on all screens, use:
padding-top: govuk-spacing(6);
For negative spacing, use a negative spacing unit number.
For example, to apply spacing unit -3 for a negative 15px top margin all screens, use:
margin-top: govuk-spacing(-3);
Overriding spacing
Occasionally, you might need to make minor adjustments like adding or removing spacing to elements of your design. You can use the spacing override classes for this.
Responsive spacing override classes
The responsive spacing override classes start with: govuk-!-
, followed by either margin-
or padding-
, and then a spacing unit number.
To apply spacing in a single direction, include left-
, right-
, top-
, or bottom-
just before the spacing unit.
For example, use:
govuk-!-margin-9
to apply a 40px margin to all sides of the element on small screens, increasing to 60px on large screensgovuk-!-padding-right-5
to apply 15px of padding to the right side of the element on small screens, increasing to 25px on large screensgovuk-!-margin-0
to remove all margins at all screen sizes
Static spacing override classes
The static spacing override classes start with govuk-!-static
. Use them the same way as the responsive spacing override classes.
For example, use:
govuk-!-static-margin-9
to apply a 60px margin to all sides of the element at all screen sizesgovuk-!-static-padding-right-5
to apply 25px of padding to the right side of the element at all screen sizesgovuk-!-static-margin-0
to remove all margins at all screen sizes, same asgovuk-!-margin-0
Examples
<div class="govuk-!-padding-bottom-9"></div>
<div class="govuk-!-padding-bottom-8"></div>
<div class="govuk-!-padding-bottom-7"></div>
<div class="govuk-!-padding-bottom-6"></div>
<div class="govuk-!-padding-bottom-5"></div>
<div class="govuk-!-padding-bottom-4"></div>
<div class="govuk-!-padding-bottom-3"></div>
<div class="govuk-!-padding-bottom-2"></div>
<div class="govuk-!-padding-bottom-1"></div>
<p class="govuk-body govuk-!-margin-bottom-9">A paragraph with a margin-bottom override (spacing unit 9).</p>
<p class="govuk-body govuk-!-margin-bottom-8">A paragraph with a margin-bottom override (spacing unit 8).</p>
<p class="govuk-body govuk-!-margin-bottom-7">A paragraph with a margin-bottom override (spacing unit 7).</p>
<p class="govuk-body govuk-!-margin-bottom-6">A paragraph with a margin-bottom override (spacing unit 6).</p>
<p class="govuk-body govuk-!-margin-bottom-5">A paragraph with a margin-bottom override (spacing unit 5).</p>
<p class="govuk-body govuk-!-margin-bottom-4">A paragraph with a margin-bottom override (spacing unit 4).</p>
<p class="govuk-body govuk-!-margin-bottom-3">A paragraph with a margin-bottom override (spacing unit 3).</p>
<p class="govuk-body govuk-!-margin-bottom-2">A paragraph with a margin-bottom override (spacing unit 2).</p>
<p class="govuk-body govuk-!-margin-bottom-1">A paragraph with a margin-bottom override (spacing unit 1).</p>
<p class="govuk-body govuk-!-margin-bottom-0">A paragraph with a margin-bottom override (spacing unit 0).</p>
Help improve this style
If you spot a problem with this guidance you can propose a change.
If you're not sure how to do this, read guidance on how to propose changes in GitHub.
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.