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

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

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

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

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

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

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

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

<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]"></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>