bulma/docs/documentation/helpers/spacing-helpers.html

---
title: Spacing helpers
layout: documentation
doc-tab: helpers
doc-subtab: helpers-spacing
breadcrumb:
- home
- documentation
- helpers
- helpers-spacing
shortcuts:
  margin: m
  padding: p
directions:
  top: t
  right: r
  bottom: b
  left: l
horizontal: x
vertical: y
values:
  0: 0
  1: 0.25rem
  2: 0.5rem
  3: 0.75rem
  4: 1rem
  5: 1.5rem
  6: 3rem
---

{% include elements/new-tag.html version="0.9.0" %}

<div class="content">
  <p>Bulma provides you <strong>margin</strong> <code>m*</code> and <strong>padding</strong> <code>p*</code> helpers in all <strong>directions</strong>:</p>

  <ul>
    <li>
      <code>*t</code> for <strong>top</strong>
    </li>
    <li>
      <code>*r</code> for <strong>right</strong>
    </li>
    <li>
      <code>*b</code> for <strong>bottom</strong>
    </li>
    <li>
      <code>*l</code> for <strong>left</strong>
    </li>
    <li>
      <code>*x</code> horizontally for both <strong>left</strong> and <strong>right</strong>
    </li>
    <li>
      <code>*y</code> vertically for both <strong>top</strong> and <strong>bottom</strong>
    </li>
  </ul>

  <p>
    You can <strong>combine</strong> a margin/padding prefix with a direciton suffix. For example:
  </p>

  <ul>
    <li>for a <code>margin-top</code>, use <code>mt-*</code></li>
    <li>for a <code>padding-bottom</code>, use <code>pb-*</code></li>
    <li>for both <code>margin-left</code> and <code>margin-right</code>, use <code>mx-*</code></li>
  </ul>

  <p>
    Each of these <code>property-direction</code> <strong>combinations</strong> needs to be appended with one of <strong>6 value suffixes</strong>:
  </p>
</div>

<table class="table is-bordered">
  <thead>
    <th>Suffix</th>
    <th>Value</th>
  </thead>
  <tbody>
    <tr><td><code>*-0</code></td><td><code>0</code></td></tr>
    <tr><td><code>*-1</code></td><td><code>0.25rem</code></td></tr>
    <tr><td><code>*-2</code></td><td><code>0.5rem</code></td></tr>
    <tr><td><code>*-3</code></td><td><code>0.75rem</code></td></tr>
    <tr><td><code>*-4</code></td><td><code>1rem</code></td></tr>
    <tr><td><code>*-5</code></td><td><code>1.5rem</code></td></tr>
    <tr><td><code>*-6</code></td><td><code>3rem</code></td></tr>
  </tbody>
</table>

{% include elements/anchor.html name="List of all spacing helpers" %}

<table id="spacingTable" class="table is-bordered">
  <thead>
    <tr>
      <th>Property</th>
      <th>Shortcut</th>
      <th colspan="7">Classes ↓</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2">Values →</th>
      {% for value in page.values %}
        <th><code>{{ value[1] }}</code></th>
      {% endfor %}
    </tr>
  </tfoot>
  <tbody>
    {% for shortcut in page.shortcuts %}
      {% for direction in page.directions %}
        <tr>
          <td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
          <td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
          {% for value in page.values %}
            <td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
          {% endfor %}
        </tr>
      {% endfor %}

      <tr>
        <td>
          <code>{{ shortcut[0] }}-left</code> <small>and</small> <br>
          <code>{{ shortcut[0] }}-right</code>
        </td>
        <td><code>{{ shortcut[1] }}{{ page.horizontal }}</code></td>
        {% for value in page.values %}
          <td><code>{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}</code></td>
        {% endfor %}
      </tr>

      <tr>
        <td>
          <code>{{ shortcut[0] }}-top</code> <small>and</small> <br>
          <code>{{ shortcut[0] }}-bottom</code>
        </td>
        <td><code>{{ shortcut[1] }}{{ page.vertical }}</code></td>
        {% for value in page.values %}
          <td><code>{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}</code></td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>