Spacing

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

Margins

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

<div>
    Upper Element
</div>
<div class="float-left one-fourth">
    Left-hand element
</div>
<div class="float-left one-third margin-s">
    Small margin on all sides
</div>
<div class="float-left one-fourth">
    Right-hand element
</div>
<div class="clear-both">
    Bottom element
</div>

<div class="float-left one-third margin-right">
    Standard margin to the right
</div>
<div class="float-left one-third">
    Right-hand element
</div>

<div>
    Top element
</div>
<div class="margin-vertical-xs">
    Extra-small vertical margins
</div>
<div>
    Bottom element
</div>

Paddings

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

<div class="padding">
    <p>
        Element with standard padding
        on all sides
    </p>
</div>

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

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