import { Meta } from '@storybook/addon-docs';
import { parameters } from '$docs/utils/docsPage.js';

<Meta title="SCSS/Spacers" parameters={{ ...parameters }} />

![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)

# Spacers

You can control spacing — margin and padding — of your elements by adding one or more of our spacer classes.

```svelte
<!-- Adds margin-top and padding -->
<div class="mt-2 p-2">
  <p>My spaced out content</p>
</div>
```

### Levels

Spacer classes are specified with a level, from `0` - `6`, where `0` is no spacing and `6` is the largest amount of spacing.

### Margin

| Class        | Property          |
| ------------ | ----------------- |
| `m-{level}`  | margin            |
| `mt-{level}` | margin-top        |
| `mr-{level}` | margin-right      |
| `mb-{level}` | margin-bottom     |
| `ml-{level}` | margin-left       |
| `mx-{level}` | margin-left/right |
| `my-{level}` | margin-top/bottom |

### Padding

| Class        | Property           |
| ------------ | ------------------ |
| `p-{level}`  | padding            |
| `pt-{level}` | padding-top        |
| `pr-{level}` | padding-right      |
| `pb-{level}` | padding-bottom     |
| `pl-{level}` | padding-left       |
| `px-{level}` | padding-left/right |
| `py-{level}` | padding-top/bottom |

## Customising spacing levels

You can customise the spacing levels in your project by defining the following SCSS variables, shown below with their default values:

```scss
$margin-levels: (
  '0': 0,
  '1': 1rem,
  '2': 2rem,
  '3': 3rem,
  '4': 4rem,
  '5': 5rem,
  '6': 6rem,
);

$padding-levels: (
  '0': 0,
  '1': 0.5rem,
  '2': 1rem,
  '3': 1.75rem,
  '4': 2.25rem,
  '5': 3rem,
  '6': 4rem,
);
```

Make sure you import or define these variables _before_ importing the style library.

```scss
@import 'my-custom-variables'; // Where you overrided the spacer variables
@import '@reuters-graphics/graphics-components/dist/scss/main';
```