Spacing classes

Quick margin

u-mt-(zero|tiny|smaller|small|normal|large|larger|huge): margin top spacing
u-mr-(zero|tiny|smaller|small|normal|large|larger|huge): margin right spacing
u-mb-(zero|tiny|smaller|small|normal|large|larger|huge): margin bottom spacing
u-ml-(zero|tiny|smaller|small|normal|large|larger|huge): margin left spacing

0px margin bottom spacing

4px margin bottom spacing

8px margin bottom spacing

12px margin bottom spacing

16px margin bottom spacing

24px margin bottom spacing

36px margin bottom spacing

48px margin bottom spacing

.u-mb-zero.bordered-box 0px margin bottom spacing
.u-mb-tiny.bordered-box 4px margin bottom spacing
.u-mb-smaller.bordered-box 8px margin bottom spacing
.u-mb-small.bordered-box 12px margin bottom spacing
.u-mb-normal.bordered-box 16px margin bottom spacing
.u-mb-large.bordered-box 24px margin bottom spacing
.u-mb-larger.bordered-box 36px margin bottom spacing
.u-mb-huge.bordered-box 48px margin bottom spacing

<div class="u-mb-zero bordered-box">
  0px margin bottom spacing
</div>
<div class="u-mb-tiny bordered-box">
  4px margin bottom spacing
</div>
<div class="u-mb-smaller bordered-box">
  8px margin bottom spacing
</div>
<div class="u-mb-small bordered-box">
  12px margin bottom spacing
</div>
<div class="u-mb-normal bordered-box">
  16px margin bottom spacing
</div>
<div class="u-mb-large bordered-box">
  24px margin bottom spacing
</div>
<div class="u-mb-larger bordered-box">
  36px margin bottom spacing
</div>
<div class="u-mb-huge bordered-box">
  48px margin bottom spacing
</div>

Quick spacing on EM

1em left padding

1em right padding

0.5em left padding

0.5em right padding

1em left margin

1em right margin

0.5em left margin

0.5em right margin

.u-pl1em.bordered-box 1em left padding
.u-pr1em.bordered-box 1em right padding
.u-pl05em.bordered-box 0.5em left padding
.u-pr05em.bordered-box 0.5em right padding
.u-ml1em.bordered-box 1em left margin
.u-mr1em.bordered-box 1em right margin
.u-ml05em.bordered-box 0.5em left margin
.u-mr05em.bordered-box 0.5em right margin

<div class="u-pl1em bordered-box">
  1em left padding
</div>
<div class="u-pr1em bordered-box">
  1em right padding
</div>
<div class="u-pl05em bordered-box">
  0.5em left padding
</div>
<div class="u-pr05em bordered-box">
  0.5em right padding
</div>
<div class="u-ml1em bordered-box">
  1em left margin
</div>
<div class="u-mr1em bordered-box">
  1em right margin
</div>
<div class="u-ml05em bordered-box">
  0.5em left margin
</div>
<div class="u-mr05em bordered-box">
  0.5em right margin
</div>

Quick padding (discarded)

`.u-p10` ... `.u-p100`	To add padding for every sides. Use `.u-p10` to add `padding: 10px`. Class name will be support upto 100 by 10.
`.u-pt10` ... `.u-pt100`	To add top padding. Use `.u-pt10` to add `padding-top: 10px`. Class name will be support upto 100 by 10.
`.u-pr10` ... `.u-pr100`	To add right padding. Use `.u-pr10` to add `padding-right: 10px`. Class name will be support upto 100 by 10.
`.u-pb10` ... `.u-pb100`	To add bottom padding. Use `.u-pb10` to add `padding-bottom: 10px`. Class name will be support upto 100 by 10.
`.u-pl10` ... `.u-pl100`	To add left padding. Use `.u-pl10` to add `padding-left: 10px`. Class name will be support upto 100 by 10.
`.u-pl1em`	To add 1em left padding.
`.u-pr1em`	To add 1em right padding.
`.u-pl05em`	To add 0.5em left padding.
`.u-pr05em`	To add 0.5em right padding.

50px paddings

50px top padding

50px right padding

50px bottom padding

50px left padding

.u-p50.bordered-box 50px paddings
.u-pt50.bordered-box 50px top padding
.u-pr50.bordered-box 50px right padding
.u-pb50.bordered-box 50px bottom padding
.u-pl50.bordered-box 50px left padding

<div class="u-p50 bordered-box">
  50px paddings
</div>
<div class="u-pt50 bordered-box">
  50px top padding
</div>
<div class="u-pr50 bordered-box">
  50px right padding
</div>
<div class="u-pb50 bordered-box">
  50px bottom padding
</div>
<div class="u-pl50 bordered-box">
  50px left padding
</div>

Quick margin (discarded)

`.u-mt10` ... `.u-mt100`	To add top margin. Use `.u-mt10` to add `margin-top: 10px`. Class name will be support upto 100 by 10.
`.u-mr10` ... `.u-mr100`	To add right margin. Use `.u-mr10` to add `margin-right: 10px`. Class name will be support upto 100 by 10.
`.u-mb10` ... `.u-mb100`	To add bottom margin. Use `.u-mb10` to add `margin-bottom: 10px`. Class name will be support upto 100 by 10.
`.u-ml10` ... `.u-ml100`	To add left margin. Use `.u-ml10` to add `margin-left: 10px`. Class name will be support upto 100 by 10.
`.u-ml1em`	To add 1em left margin.
`.u-mr1em`	To add 1em right margin.
`.u-ml05em`	To add 0.5em left margin.
`.u-mr05em`	To add 0.5em right margin.

50px top margin

50px left margin

50px bottom margin

50px right margin

sass:
  .bordered-box
    border: 1px solid #e2e6ef

.u-mt50.bordered-box 50px top margin
.u-ml50.bordered-box 50px left margin
.u-mb50.bordered-box 50px bottom margin
.u-mr50.bordered-box 50px right margin

<style type="text/css">
  .bordered-box {
    border: 1px solid #e2e6ef;
  }
</style>
<div class="u-mt50 bordered-box">
  50px top margin
</div>
<div class="u-ml50 bordered-box">
  50px left margin
</div>
<div class="u-mb50 bordered-box">
  50px bottom margin
</div>
<div class="u-mr50 bordered-box">
  50px right margin
</div>