Standardise padding and margins utility class

[MagdalenaLarge]

As Interaction Designer
I want to have standard padding and margins
So that they sit correctly in 8pix grid on ONS website

Description
As an outcome of change from 9 pix to 8 pix grid, we need to look into standardising utility classes for padding and margins.
This will support new ONS website and give user better experience on both mobile and desktop devices.

Acceptance criteria

1. All the utility classes for padding and margins have been identified
2. Utility classes for padding and margins have been standardise
3. Padding and margins are sitting in the 8pix grid
4. Padding and margins are correctly adjusted to the device type.

Visualisation/Input from UCD
How should the components look like?

Linked User stories/epics
Issue link to the change of utility classes to 8 pix grid
Technical details

To do this we will need to:

• change the _pad.scss file to match the configuration of the _margin.scss file. The sizes in the padding file will change to match the sizes in the margin file.
• !important should be removed from the no size and added to the function below like in the margin doc.
• also rename _pad.scss to _padding.scss and update all references to it for consistency.

After doing this the visual tests will need to be run and the results reviewed. There will be some instances of utility padding classed being used where the size of the padding will need to change.

MVP (optional)

[MagdalenaLarge]

For the reference please use the Typography prepared by Interaction Designers.

[Majsol]