Add margins in multiples of the horizontal or vertical rhythm, from 0 - 10, plus 15 and 20 for larger screen sizes.

<div class="ch-mt--[0-10, 15, 20]">top</div>
<!-- margin-top: [0-10, 15, 20]; -->

<div class="ch-mb--[0-10, 15, 20]">bottom</div>
<!-- margin-bottom: [0-10, 15, 20]; -->

<div class="ch-ml--[0-10, 15, 20]">left</div>
<!-- margin-left: [0-10, 15, 20]; -->

<div class="ch-mr--[0-10, 15, 20]">right</div>
<!-- margin-right: [0-10, 15, 20]; -->

<div class="ch-ma--[0-10, 15, 20]">all</div>
<!-- margin: [0-10, 15, 20]; -->

<div class="ch-mv--[0-10, 15, 20]">vertical</div>
<!-- margin-top: [0-10, 15, 20]; margin-bottom: [0-10, 15, 20]; -->

<div class="ch-mh--[0-10, 15, 20]">horizontal</div>
<!-- margin-left: [0-10, 15, 20]; margin-right: [0-10, 15, 20]; -->

<div class="ch-ml--auto">left</div>
<!-- margin-left: auto; -->
<div class="ch-mr--auto">right</div>
<!-- margin-right: auto; -->
<div class="ch-mh--auto">horizontal</div>
<!-- margin-left: auto; margin-right: auto; -->

<!-- Responsive -->
<div class="[sl,sm,md,lg]:ch-m*--[0-10, 15, 20]"></div>

<div class="[sl,sm,md,lg]:ch-ml--auto"></div>
<div class="[sl,sm,md,lg]:ch-mr--auto"></div>
<div class="[sl,sm,md,lg]:ch-mh--auto"></div>

---

Negative margins

Add margins in negative multiples of the horizontal or vertical rhythm, up to 4:

<div class="ch-mt--n[1-4]">top</div>
<!-- margin-top: -[1-4]; -->

<div class="ch-mb--n[1-4]">bottom</div>
<!-- margin-bottom: -[1-4]; -->

<div class="ch-ml--n[1-4]">left</div>
<!-- margin-left: -[1-4]; -->

<div class="ch-mr--n[1-4]">right</div>
<!-- margin-right: -[1-4]; -->

<div class="ch-ma--n[1-4]">all</div>
<!-- margin: -[1-4]; -->

<div class="ch-mv--n[1-4]">vertical</div>
<!-- margin-top: -[1-4]; margin-bottom: -[1-4]; -->

<div class="ch-mh--n[1-4]">horizontal</div>
<!-- margin-left: -[1-4]; margin-right: -[1-4]; -->

<!-- Responsive -->
<div class="[sl,sm,md,lg]:ch-m*--n[1-4]"></div>