Margin
←Sometimes your elements just need a little space on the outside. Use margin to separate the block from things outside it. Here are utility classes for all cardinal directions, plus combined horizontal and vertical helpers.
Example: ma-t_s — where the first letter m obviously stands for margin, while -t is for top and _s for the small size.
Syntax:
.m{-direction}{_size}
SCSS:
_margin.scss
Top
ma-t_xs
ma-t_s
ma-t_m
ma-t_l
Right
ma-r_xs
ma-r_s
ma-r_m
ma-r_l
Bottom
ma-b_xs
ma-b_s
ma-b_m
ma-b_l
Left
ma-l_xs
ma-l_s
ma-l_m
ma-l_l
Vertical
ma-v_xs
ma-v_s
ma-v_m
ma-v_l
Horizontal
ma-h_xs
ma-h_s
ma-h_m
ma-h_l
<h3 class="ma-t_l">Top</h3>
<div class="ma-b_m">
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-t_xs">ma-t_xs</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-t_s">ma-t_s</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-t_m">ma-t_m</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-t_l">ma-t_l</div></div>
</div>
<h3 class="ma-t_l">Right</h3>
<div class="ma-b_m">
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-r_xs">ma-r_xs</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-r_s">ma-r_s</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-r_m">ma-r_m</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-r_l">ma-r_l</div></div>
</div>
<h3 class="ma-t_l">Bottom</h3>
<div class="ma-b_m">
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-b_xs">ma-b_xs</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-b_s">ma-b_s</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-b_m">ma-b_m</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-b_l">ma-b_l</div></div>
</div>
<h3 class="ma-t_l">Left</h3>
<div class="ma-b_m">
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-l_xs">ma-l_xs</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-l_s">ma-l_s</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-l_m">ma-l_m</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-l_l">ma-l_l</div></div>
</div>
<h3 class="ma-t_l">Vertical</h3>
<div class="ma-b_m">
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-v_xs">ma-v_xs</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-v_s">ma-v_s</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-v_m">ma-v_m</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-v_l">ma-v_l</div></div>
</div>
<h3 class="ma-t_l">Horizontal</h3>
<div class="ma-b_m">
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-b ma-h_xs">ma-h_xs</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-c ma-h_s">ma-h_s</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-d ma-h_m">ma-h_m</div></div>
<div class="docs-margin-helper bg-0 ma-v_xs"><div class="box text-mono text-clip bg-e ma-h_l">ma-h_l</div></div>
</div>
<style>
.docs-margin-helper { border: 1px solid transparent; } /* avoid margin collaspe */
</style>