Padding

All

Multiples of 5, Max:100
p-a-{5x} 
<div class="p-a-15">
  15px padding
</div>
<div class="p-a-0">
    no padding
</div>
  </div>
</div>
<hr>
<h4>Top</h4>
<div class="u-flex u-flexRow u-flexAlignItemsCenter">
  <div class="u-sizeFillAlt">
    <h5>
      Multiples of 5, Max:100
    </h5>
    <code>p-t-{5x}</code>
  </div>
  <div class="u-sizeFillAlt">

Directional

                  <div class="u-flex u-flexRow u-flexAlignItemsCenter">
                    <div class="u-sizeFillAlt">
                      <h5>
                        Multiples of 5, Max:100
                      </h5>
                      <code>p-t-{5x}</code><br>
                      <code>p-r-{5x}</code><br>
                      <code>p-b-{5x}</code><br>
                      <code>p-l-{5x}</code><br>
                      <code>p-h-{5x}</code><br>
                      <code>p-v-{5x}</code><br>
                    </div>
                    <div class="u-sizeFillAlt">
                      <pre><code>  &lt;div class=&quot;p-t-0&quot;&gt;
no top padding

</div> 

                      <pre><code>  &lt;div class=&quot;p-r-30&quot;&gt;
30px right padding

</div> 

                      <pre><code>  &lt;div class=&quot;p-b-40&quot;&gt;
40px bottom padding

</div> 

                      <pre><code>  &lt;div class=&quot;p-l-50&quot;&gt;
50px left padding

</div> 

                      <pre><code>  &lt;div class=&quot;p-h-10&quot;&gt;
10px horizontal (left and right) padding

</div> 

                      <pre><code>  &lt;div class=&quot;p-v-30&quot;&gt;
35px vertical (top and bottom) padding

</div> 

            <!-- BEGIN: margin -->
            <div class="col-sm-6">
              <div class="box">
                <header>
                  <h3>Margin</h3>
                </header>
                <div class="box-body">
                  <hr>
                  <h4>All</h4>
                  <div class="u-flex u-flexRow u-flexAlignItemsCenter">
                    <div class="u-sizeFillAlt">
                      <h5>
                        Multiples of 5, Max:100
                      </h5>
                      <code>m-a-{5x}</code>
                    </div>
                    <div class="u-sizeFillAlt">
                      <pre><code>  &lt;div class=&quot;m-a-15&quot;&gt;
15px margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-a-0&quot;&gt;
no margin

</div>

Directional

                  <div class="u-flex u-flexRow u-flexAlignItemsCenter">
                    <div class="u-sizeFillAlt">
                      <h5>
                        Multiples of 5, Max:100
                      </h5>
                      <code>m-t-{5x}</code><br>
                      <code>m-r-{5x}</code><br>
                      <code>m-b-{5x}</code><br>
                      <code>m-l-{5x}</code><br>
                      <code>m-h-{5x}</code><br>
                      <code>m-v-{5x}</code>
                    </div>
                    <div class="u-sizeFillAlt">
                      <pre><code>  &lt;div class=&quot;m-t-0&quot;&gt;
no top margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-r-30&quot;&gt;
30px right margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-b-40&quot;&gt;
40px bottom margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-l-50&quot;&gt;
50px left margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-h-50&quot;&gt;
50px horizontal (left and right) margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-v-40&quot;&gt;
40px vertical (top and bottom) margin

</div> 

                  <hr>
                  <h4>Auto</h4>

                  <div class="u-flex u-flexRow u-flexAlignItemsCenter">
                    <div class="u-sizeFillAlt">
                      <code>m-t-a</code><br>
                      <code>m-r-a</code><br>
                      <code>m-b-a</code><br>
                      <code>m-l-a</code><br>
                      <code>m-h-a</code><br>
                      <code>m-v-a</code><br>
                      <code>m-a-a</code>
                    </div>
                    <div class="u-sizeFillAlt">
                      <pre><code>  &lt;div class=&quot;m-t-a&quot;&gt;
auto top margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-r-a&quot;&gt;
auto right margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-b-a&quot;&gt;
auto bottom margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-l-a&quot;&gt;
auto left margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-h-a&quot;&gt;
auto horizontal (left and right) margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-v-a&quot;&gt;
auto vertical (top and bottom) margin

</div> 

                      <pre><code>  &lt;div class=&quot;m-a-a&quot;&gt;
auto all directions margin

</div> 

      </div>
    </div>
  </div>
  <!-- END: margin -->
</div>