{{#markdown}}
Usage: **.[type][direction][size]**.<br />
Example: **.prl** (applies a large padding to the right side of the element).
{{/markdown}}

<table class="table table-text table-hover">
      <thead>
        <tr>
          <th>Value</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code class=" language-css">[type]</code></td>
          <td>Margin (<code>m</code>) or padding (<code>p</code>).</td>
        </tr>
        <tr>
          <td><code class=" language-css">[direction]</code></td>
          <td>
            <p>The side or axis on which to apply the spacing:</p>
            <ul class="link-list">
              <li><code class=" language-css">a</code> All</li>
              <li><code class=" language-css">t</code> Top</li>
              <li><code class=" language-css">r</code> Right</li>
              <li><code class=" language-css">b</code> Bottom</li>
              <li><code class=" language-css">l</code> Left</li>
              <li><code class=" language-css">h</code> Horizontal</li>
              <li><code class=" language-css">v</code> Vertical</li>
            </ul>
        </td></tr>
        <tr>
          <td><code class=" language-css">[size]</code></td>
          <td>
            <ul class="link-list">
              <li><code class=" language-css">n</code> None</li>
              <li><code class=" language-css">xs</code> eXtra Small</li>
              <li><code class=" language-css">s</code> Small</li>
              <li><code class=" language-css">m</code> Medium</li>
              <li><code class=" language-css">l</code> Large</li>
              <li><code class=" language-css">xl</code> eXtra Large</li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>

<div class="code-content">
{{> toggle-code}}
{{#markdown}}
```html
<!-- The id attribute describes the class value-->
<div id="padding-all-small" class="pas"> ... </div>
<div id="padding-all-none" class="pan"> ... </div>
<div id="margin-top-extra-large" class="mtxl"> ... </div>
<div id="margin-left-none" class="mln"> ... </div>
```
{{/markdown}}

{{> copy-code}}
</div>