Spacing
Margin
In the example below, Margin is applied to the lighter gray elements.
margin-6
margin-10
margin-14
margin-20
margin-24
margin-30
Directional Margin
In the example below, Margin is applied to the lighter gray elements.
margin-top-20
margin-right-20
margin-bottom-20
margin-left-20
Code
Breakpoint prefixed classes available, using margin-{PREFIX}-{DIRECTION}-{AMOUNT} where {PREFIX} is s, m, l, xl, {DIRECTION} is top, right, bottom or left AND {AMOUNT} is any number 0 - 50 divisible by 2, eg. 2, 4, 6, 8, etc.
<span class="margin-0"></span>
<span class="margin-12"></span>
<span class="margin-24"></span>
<span class="margin-50"></span>
<span class="margin-top-0"></span>
<span class="margin-right-12"></span>
<span class="margin-bottom-24"></span>
<span class="margin-left-50"></span>
<span class="margin-l-24"></span>
<span class="margin-s-top-0"></span>
<span class="margin-m-right-12"></span>
<span class="margin-xl-bottom-24"></span>Padding
In the example below, PAdding is applied to the white elements.
padding-6
padding-10
padding-14
padding-20
padding-24
padding-30
Directional Margin
In the example below, Margin is applied to the lighter gray elements.
padding-top-20
padding-right-20
padding-bottom-20
padding-left-20
Code
Breakpoint prefixed classes available, using padding-{DIRECTION}-{PREFIX}-{AMOUNT} where {DIRECTION} is top, right, bottom or left, {PREFIX} is s, m, l, xl AND {AMOUNT} is any number 0 - 50 divisible by 2, eg. 2, 4, 6, 8, etc.
<span class="padding-0"></span>
<span class="padding-12"></span>
<span class="padding-24"></span>
<span class="padding-50"></span>
<span class="padding-top-0"></span>
<span class="padding-right-12"></span>
<span class="padding-bottom-24"></span>
<span class="padding-left-50"></span>
<span class="padding-l-24"></span>
<span class="padding-top-s-0"></span>
<span class="padding-right-m-12"></span>
<span class="padding-bottom-xl-24"></span>