Margin
Margin helper classes help add a specific margin value to an element. These margin classes are based on a specific spacing scale which will help make spacing consistent across your product. You can even combine different margin classes together into an element.
Margin All
margin-all-small
margin-all-normal
margin-all-large
margin-all-xlarge
margin-all-jumbo
<div class="margin-all-small">...</div>
<div class="margin-all-normal">...</div>
<div class="margin-all-large">...</div>
<div class="margin-all-xlarge">...</div>
<div class="margin-all-jumbo">...</div>
Margin Top
margin-top-small
margin-top-normal
margin-top-large
margin-top-xlarge
margin-top-jumbo
<div class="margin-top-small">...</div>
<div class="margin-top-normal">...</div>
<div class="margin-top-large">...</div>
<div class="margin-top-xlarge">...</div>
<div class="margin-top-jumbo">...</div>
Margin Right
margin-right-small
margin-right-normal
margin-right-large
margin-right-xlarge
margin-right-jumbo
<div class="margin-right-small">...</div>
<div class="margin-right-normal">...</div>
<div class="margin-right-large">...</div>
<div class="margin-right-xlarge">...</div>
<div class="margin-right-jumbo">...</div>
Margin Bottom
margin-bottom-small
margin-bottom-normal
margin-bottom-large
margin-bottom-xlarge
margin-bottom-jumbo
<div class="margin-bottom-small">...</div>
<div class="margin-bottom-normal">...</div>
<div class="margin-bottom-large">...</div>
<div class="margin-bottom-xlarge">...</div>
<div class="margin-bottom-jumbo">...</div>
Margin Left
margin-left-small
margin-left-normal
margin-left-large
margin-left-xlarge
margin-left-jumbo
<div class="margin-left-small">...</div>
<div class="margin-left-normal">...</div>
<div class="margin-left-large">...</div>
<div class="margin-left-xlarge">...</div>
<div class="margin-left-jumbo">...</div>
Margin Horizontal
margin-horizontal-small
margin-horizontal-normal
margin-horizontal-large
margin-horizontal-xlarge
margin-horizontal-jumbo
<div class="margin-horizontal-small">...</div>
<div class="margin-horizontal-normal">...</div>
<div class="margin-horizontal-large">...</div>
<div class="margin-horizontal-xlarge">...</div>
<div class="margin-horizontal-jumbo">...</div>
Margin Vertical
margin-vertical-small
margin-vertical-normal
margin-vertical-large
margin-vertical-xlarge
margin-vertical-jumbo
<div class="margin-vertical-small">...</div>
<div class="margin-vertical-normal">...</div>
<div class="margin-vertical-large">...</div>
<div class="margin-vertical-xlarge">...</div>
<div class="margin-vertical-jumbo">...</div>
Margin Reset
You can use margin-*-0 to reset the margin
<div class="margin-all-0">...</div>
<div class="margin-top-0">...</div>
<div class="margin-right-0">...</div>
<div class="margin-bottom-0">...</div>
<div class="margin-left-0">...</div>
<div class="margin-horizontal-0">...</div>
<div class="margin-vertical-0">...</div>