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

---
title: Spacing helpers
layout: docs
theme: helpers
doc-tab: helpers
doc-subtab: helpers-spacing
breadcrumb:
  - home
  - documentation
  - helpers
  - helpers-spacing
shortcuts:
  margin: m
  padding: p
directions:
  all: a
  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
  auto: auto
customShortcuts:
  margin: mg
customHorizontal: h
customValues:
  small: 10px
  medium: 30px
  large: 60px
---

<div class="content">
  <p>
    Bulma provides <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 need to <strong>combine</strong> a margin/padding prefix with a
    direction 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 docs/elements/anchor.html name="List of all spacing helpers" %}

<p class="block">
  There are <strong>112 spacing helpers</strong> to choose from:
</p>

{% include docs/components/spacing-table.html values=page.values
shortcuts=page.shortcuts directions=page.directions horizontal=page.horizontal
vertical=page.vertical %}

<div class="content">
  <p>To use these classes, simply append them to any HTML element:</p>
</div>

{% highlight html %}
<!-- Adds 1rem of margin at the bottom -->
<p class="mb-4">Margin bottom</p>

<!-- Adds 0.25rem of padding on the left and the right -->
<p class="px-1">Horizontal padding</p>

<!-- Removes the margin on the right and adds 0.75rem padding at the top -->
<p class="mr-0 pt-3">Both</p>
{% endhighlight %} {% include docs/elements/anchor.html name="Configuration" %}
{% capture custom %} $spacing-shortcuts: ("margin": "mg"); $spacing-horizontal:
"h"; $spacing-vertical: null; $spacing-values: ("small": 10px, "medium": 30px,
"large": 60px); {% endcapture %}

<div class="content">
  <p>
    Because every developer has their own preferences, and to satisfy Bulma's
    customization features, it's possible to specify your own
    <strong>class name shortcuts</strong> as well as the
    <strong>spacing values</strong>.
  </p>
  <p>For example, if you wanted:</p>
  <ul>
    <li><strong>margin</strong> to be abbreviated to <code>mg</code></li>
    <li>
      <strong>padding</strong> to be totally
      <strong class="has-text-danger">excluded</strong>
    </li>
    <li><strong>horizontal</strong> to be abbreviated to <code>h</code></li>
    <li><strong>vertical</strong> to be excluded as well</li>
    <li>
      and to only have 3 values: <strong>"small"</strong> at <code>10px</code>,
      <strong>"medium"</strong> at <code>30px</code>, and
      <strong>"large"</strong> at <code>60px</code>
    </li>
  </ul>
  <p>
    You can simplify the CSS output by customizing these
    <strong>SCSS variables</strong>:
  </p>
</div>

{% highlight scss -%} {{- custom -}} {%- endhighlight %} {% include
docs/components/spacing-table.html values=page.customValues
shortcuts=page.customShortcuts directions=page.directions
horizontal=page.customHorizontal %}

<p>
  By customizing the output, you've narrowed down the list of spacing helpers
  from 112 to only <strong>18</strong>.
</p>