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.

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

Open this example in a new tab

HTML

<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>

Open this example in a new tab

HTML

<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>

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%.

These examples are for the generic width override classes - read specific guidance on setting text input width.

Open this example in a new tab

HTML

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

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

Help improve this page

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.