Spacing
Use a consistent spacing scale to make relationships clear.
Use the Camden spacing scales to create consistent relationships between elements.
Responsive spacing
Responsive spacing changes at larger screen sizes.
| Spacing unit | Small screen | Large screen |
|---|---|---|
| 0 | 0 | 0 |
| 1 | 5px | 5px |
| 2 | 10px | 10px |
| 3 | 15px | 15px |
| 4 | 15px | 20px |
| 5 | 20px | 25px |
| 6 | 25px | 30px |
| 7 | 30px | 40px |
| 8 | 35px | 50px |
| 9 | 45px | 60px |
| 10 | 55px | 70px |
Static spacing
Static spacing stays the same at every screen size and uses the large-screen values from the responsive 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 SCSS
Use govuk-responsive-margin or govuk-responsive-padding for responsive spacing.
@include govuk-responsive-padding(6);
@include govuk-responsive-margin(6, "bottom");Use govuk-spacing for static spacing.
padding-top: govuk-spacing(6);
margin-top: govuk-spacing(-3);Spacing override classes
Use spacing override classes for small, local adjustments. Examples include govuk-!-margin-0, govuk-!-padding-right-5 and govuk-!-static-margin-9.