All spacing is done using an 8pt scale. Starting with n-half at 8px and going to n-16 at 128px.


Margin utilities are prefixed with m- and can be used to push other elements away from any side.

Use the convention m-size or m-side-size, e.g m-l or m-bottom-l.

<div class="m-half">.m-half</div>
<div class="m-1">.m-1</div>
<div class="m-2">.m-2</div>
<div class="m-3">.m-3</div>
<div class="m-4">.m-4</div>
<div class="m-5">.m-5</div>
<div class="m-6">.m-6</div>
<div class="m-7">.m-7</div>
<div class="m-8">.m-8</div>
<div class="m-9">.m-9</div>
<div class="m-10">.m-10</div>
<div class="m-11">.m-11</div>
<div class="m-12">.m-12</div>
<div class="m-13">.m-13</div>
<div class="m-14">.m-14</div>
<div class="m-15">.m-15</div>
<div class="m-16">.m-16</div>


Padding utilities are prefixed with p- and can be used to add space inside an element on any side.

Use the convention p-size or m-side-size, e.g m-large or m-bottom-l.

<div class="p-half">.p-half</div>
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
<div class="p-3">.p-3</div>
<div class="p-4">.p-4</div>
<div class="p-5">.p-5</div>
<div class="p-6">.p-6</div>
<div class="p-7">.p-7</div>
<div class="p-8">.p-8</div>
<div class="p-9">.p-9</div>
<div class="p-10">.p-10</div>
<div class="p-11">.p-11</div>
<div class="p-12">.p-12</div>
<div class="p-13">.p-13</div>
<div class="p-14">.p-14</div>
<div class="p-15">.p-15</div>
<div class="p-16">.p-16</div>


All spacing classes are responsive and can use the __m and __l modifier classes, e.g p-top__m.