## Spacing

Superdesk UI Framework includes a range of shorthand margin and padding helper classes to modify an element’s appearance. To keep consistency, all end values are actualy mutipliers of the `$sd-base-increment` variable, which equals to 0.8rem. For convinience the root (html) font-size is set to 10px, which makes 1rem by default equal to 10px.

#### Naming

The classes are named using the format `{property}-{side}--{size}`.

Where `{property}` is:

- `sd-padding` - for setting `padding`
- `sd-margin` - for setting `margin`

Where `{side}` is one of:

- `t` - sets `margin-top` or `padding-top`
- `b` - sets `margin-bottom` or `padding-bottom`
- `l` - sets `margin-left` or `padding-left`
- `r` - sets `margin-right` or `padding-right`
- `x` - sets both `*-left` and `*-right`
- `y` - sets both `*-top` and `*-bottom`
- blank (no side defined) - sets a margin or padding on all 4 sides of the element (eg. `sd-margin--2` )

Where `{size}` is one of:

- `0` - eliminates the margin or padding by setting it to `0`
- `0-5` - sets the margin or padding to `$sd-base-increment * .5` (results to 0.4rem)
- `1` - sets the margin or padding to `$sd-base-increment` (results to 0.8rem)
- `1-5` - sets the margin or padding to `$sd-base-increment * 1.5` (results to 1.2rem)
- `2` - sets the margin or padding to `$sd-base-increment * 2` (results to 1.6rem)
- `3` - sets the margin or padding to `$sd-base-increment * 3` (results to 2.4rem)
- `4` - sets the margin or padding to `$sd-base-increment * 4` (results to 3.2rem)
- `5` - sets the margin or padding to `$sd-base-increment * 5` (results to 4rem)

#### Examples

`

    <div class="sd-margin-t--2"></div>

`

// Sets the top margin to 1.6rem

`

    <div class="sd-margin--3"></div>

`

// Sets the margin on all sides to 2.4rem

`

    <div class="sd-margin-y--1"></div>

`

// Sets the top and bottom margin to 0.8rem

`

    <div class="sd-padding-x--2"></div>

`

// Sets the left and right padding to 1.6rem

`

    <div class="sd-padding-b--4"></div>

`

// Sets the bottom padding to 3.2rem

`

    <div class="sd-padding--0"></div>

`

// Set/reset the padding on all sides to 0

### Margin auto

Besides numeric margin values, Superdesk UI Framework includes also a range of helper classes to set margins to `auto`. The naming logic is the same as with nuneric values except that `{size}` is always replaced with `auto`.

#### Available options

- `sd-margin-l--auto`
  // Sets the left margin to auto.

- `sd-margin-r--auto`
  // Sets the right margin to auto.

- `sd-margin-t--auto`
  // Sets the top margin to auto.

- `sd-margin-b--auto`
  // Sets the bottom margin to auto.

- `sd-margin-x--auto`
  // Sets the left and right margin to auto (convinient for centering block level items inside a container).

- `sd-margin-y--auto`
  // Sets the top and bottom margin to auto.

- `sd-margin--auto`
  // Sets all margins to auto.