---
title: Spacing and sizes
---

## Size values

Fixed to base so wont scale with font sizes.

- `small` 0.5rem
- `medium` 1rem
- `large` 1.5rem
- `xlarge` 2rem

Relative to font size.

- `small-rel` 0.5em
- `medium-rel` 1em
- `large-rel` 1.5em
- `xlarge-rel` 2em

Varies depending on the width of browser.

- `small-var` calc(1vw + 0.5rem)
- `medium-var` calc(1vw + 1rem)
- `large-var` calc(2vw + 1rem)
- `xlarge-var` calc(3vw + 1rem)

## Spacing helpers

The following set of classes can be used to add specific margin and padding values to an element. These specify both the size and type of spacing to use along with an optional direction.

### Margin

Use the class format `.sta-margin--X-Y`.

Where X is a size value (see above) and Y is one of the following directions.

- `.sta-margin--X-v` applies top and bottom margin
- `.sta-margin--X-h` applies left and right margin
- `.sta-margin--X-top` applies top margin only
- `.sta-margin--X-bottom` applies bottom margin only
- `.sta-margin--X-left` applies left margin only
- `.sta-margin--X-right` applies right margin only
- `.sta-margin--X` applies margin to all four directions

### Padding

This uses the same pattern as margin but with the format `.sta-padding--X-Y`.