Styles

Spacing

The responsive spacing scale

The Design System uses a responsive spacing scale which adapts based on screen size. For example, if you apply spacing unit 9 to a margin, it will be 60px on large screens and 40px on small screens.

GOV.UK Frontend spacing scale
Spacing unit Large screens Small screens
9 60px 40px
8 50px 30px
7 40px 25px
6 30px 20px
5 25px 15px
4 20px 15px
3 15px 15px
2 10px 10px
1 5px 5px
0 0 0

Spacing override classes

Occasionally, you might need to make minor adjustments like adding or removing spacing to elements of your design. You can use the responsive spacing override classes for this.

Using the override classes

The spacing override classes are structured to allow you to apply any size of the scale, using margin or padding in any direction.

For example, govuk-!-margin-9 will set a margin of 60px on large screens and 40px on small screens.

To add padding use -padding instead of -margin.

If you want to add the margin or padding in a particular direction, add left for left, right for right, top for top, or bottom for bottom. For example, -margin-top will set margin-top, -padding-right will set padding-right. If you do not specify a direction, the margin or padding will be applied to all sides of the element.

The last part of the class represents the value you want to apply. For example, in govuk-!-margin-9, the -9 represents 9 on the spacing scale.

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 an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-8">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-7">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-6">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-5">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-4">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-3">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-2">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-1">A paragraph with an overridden margin-bottom.</p>
<p class="govuk-body govuk-!-margin-bottom-0">A paragraph with an overridden margin-bottom.</p>

Spacing on custom components

If you’re building your own components and want to reference the spacing scale directly in your SCSS file you can use the spacing scale through a mixin or a function.

Using the static spacing function

If you want to use static values that will not change based on breakpoints you can reference the static spacing scale function like this:

padding-top: govuk-spacing(6)

Using the responsive spacing mixin

If you want to use the responsive spacing scale you can reference the mixin.

For example, use @include govuk-responsive-margin(6, "bottom"); for 30px margin-bottom on large screens and 20px on small screens.

Use @include govuk-responsive-padding(6); for 30px padding on all sides on large screens and 20px on small screens.

Width override classes

If you need to constrain the width of an element independently of the grid system, you can use width override classes.

As with the spacing override classes the width override classes start with govuk-!-. The second part of the class name signifies the width on larger screen sizes. For example, govuk-!-width-one-half will apply a width of 50% and govuk-!-width-two-thirdswill apply a width of 66.66%.

<h3 class="govuk-heading-m">Full</h3>

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-full" for="full-name">
    Full name
  </label>
  <input class="govuk-input govuk-!-width-full" id="full-name" name="full-name" type="text">
</div>

<h3 class="govuk-heading-m">Three-quarters</h3>

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-three-quarters" for="full-name">
    Full name
  </label>
  <input class="govuk-input govuk-!-width-three-quarters" id="full-name" name="full-name" type="text">
</div>

<h3 class="govuk-heading-m">Two-thirds</h3>

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-two-thirds" for="full-name">
    Full name
  </label>
  <input class="govuk-input govuk-!-width-two-thirds" id="full-name" name="full-name" type="text">
</div>

<h3 class="govuk-heading-m">One-half</h3>

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-one-half" for="full-name">
    Full name
  </label>
  <input class="govuk-input govuk-!-width-one-half" id="full-name" name="full-name" type="text">
</div>

<h3 class="govuk-heading-m">One-third</h3>

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-one-third" for="full-name">
    Full name
  </label>
  <input class="govuk-input govuk-!-width-one-third" id="full-name" name="full-name" type="text">
</div>

<h3 class="govuk-heading-m">One-quarter</h3>

<div class="govuk-form-group">
  <label class="govuk-label govuk-!-width-one-quarter" for="full-name">
    Full name
  </label>
  <input class="govuk-input govuk-!-width-one-quarter" id="full-name" name="full-name" type="text">
</div>

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk