# Spacing

HTML block elements can receive inward and outward spacings, called margins and paddings. They control either the distance between two sibling elements, or the padding between a parent element's outer boundaries and its child elements.

1. Syntax
2. Margins
3. Paddings

## Syntax

The full syntax for all spacing classes is `<spacing-type>-<side>-<size>`, as in `margin-bottom-xs` or `padding-left-xl`.
Omitting the side will give you the specified margin on all four sides (e.g. `margin-xl`, `padding-s`).

You can also apply a standard spacing by leaving out the size. That is, `margin-right` will give you a standard-sized margin to the right, and `padding` will give you a standard-sized padding on all four sides.

Using `none` for size will reset any existing margins or paddings on the specified side to zero.

### Legend

Spacing Type
  - `margin`
  - `padding`
Side
  - `top`
  - `bottom`
  - `left`
  - `right`
  - `vertical`
  - `horizontal`
Size
  - `none`
  - `xs`
  - `s`
  - `m`
  - `l`
  - `xl`
  - `xxl`

## Margins

Applying a margin to an element will move it away from its neighboring elements.

Elements with margins

    <div class="demo-box-3">&nbsp;</div>
    <div class="float-left one-fourth demo-box-2">&nbsp;</div>
    <div class="margin-s float-left one-third demo-box-1">
        Small margin on all sides
    </div>
    <div class="float-left one-fourth demo-box-2">&nbsp;</div>
    <div class="clear-both demo-box-4">&nbsp;</div>

Small margin on all sides

    <div class="margin-right float-left one-third demo-box-1">
        Standard margin to the right
    </div>
    <div class="float-left one-third demo-box-2">&nbsp;</div>

Standard margin to the right

    <div class="demo-box-2">&nbsp;</div>
    <div class="margin-vertical-xs demo-box-1">
        Extra-small vertical margins
    </div>
    <div class="demo-box-3"> </div>

Extra-small vertical margins

## Paddings

Applying a padding to an element will put space between its outer edge and its child elements.

Elements with paddings

    <div class="padding demo-box-2">
        <p class="demo-box-1">
            Element with standard padding
            on all sides
        </p>
    </div>

Element with standard padding on all sides

    <div class="padding-left-xl demo-box-2">
        <p class="demo-box-1">
            Element with extra-large padding
            on the left
        </p>
    </div>

Element with extra-large padding on the left

    <div class="padding-vertical-s padding-horizontal-l demo-box-2">
        <p class="demo-box-1">
            Element with small vertical padding
            and large horizontal padding
        </p>
    </div>

Element with small vertical padding and large horizontal padding