Space Between

Responsive
Evenly space child elements vertically.

Class Properties
.space-y-0Make a 0px spacer between every child element
.space-y-1Make a 4px spacer between every child element
.space-y-2Make a 8px spacer between every child element
.space-y-3Make a 12px spacer between every child element
.space-y-4Make a 16px spacer between every child element
.space-y-5Make a 20px spacer between every child element
.space-y-6Make a 24px spacer between every child element
.space-y-7Make a 28px spacer between every child element
.space-y-8Make a 32px spacer between every child element
.space-y-9Make a 36px spacer between every child element
.space-y-10Make a 40px spacer between every child element
.space-y-12Make a 48px spacer between every child element
.space-y-16Make a 64px spacer between every child element
.space-y-20Make a 80px spacer between every child element
.space-y-24Make a 96px spacer between every child element
.space-y-32Make a 128px spacer between every child element
.space-y-40Make a 160px spacer between every child element

Usage

Similar to space between in Tailwind, this allows you to space elements evenly vertically. Good for things like paragraphs of text. If you want horizontal spacing between elements or more complex alignment, check out the Stack documentation.

<div class="space-y-3">
  <a class="btn btn-primary" href="http://example.com">Space between these buttons</a>
  <a class="btn btn-primary" href="http://example.com">Space between these buttons</a>
  <a class="btn btn-primary" href="http://example.com">Space between these buttons</a>
</div>
Space between these buttons

Compiled Example

Input

<div class="space-y-3">
  <a class="btn btn-primary" href="http://example.com">Space between these buttons</a>
  <a class="btn btn-primary" href="http://example.com">Space between these buttons</a>
  <a class="btn btn-primary" href="http://example.com">Space between these buttons</a>
</div>

Output

<div class="space-y-3">
  <table class="btn btn-primary" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
    <tbody>
      <tr>
        <td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
          <a href="http://example.com" style="color: #ffffff; font-size: 16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; border-radius: 6px; line-height: 20px; display: inline-block; font-weight: normal; white-space: nowrap; background-color: #0d6efd; padding: 8px 12px; border: 1px solid #0d6efd;">Space between these buttons</a>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="s-3 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
    <tbody>
      <tr>
        <td style="line-height: 12px; font-size: 12px; width: 100%; height: 12px; margin: 0;" align="left" width="100%" height="12">
           
        </td>
      </tr>
    </tbody>
  </table>
    <table class="btn btn-primary" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
    <tbody>
      <tr>
        <td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
          <a href="http://example.com" style="color: #ffffff; font-size: 16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; border-radius: 6px; line-height: 20px; display: inline-block; font-weight: normal; white-space: nowrap; background-color: #0d6efd; padding: 8px 12px; border: 1px solid #0d6efd;">Space between these buttons</a>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="s-3 w-full" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;" width="100%">
    <tbody>
      <tr>
        <td style="line-height: 12px; font-size: 12px; width: 100%; height: 12px; margin: 0;" align="left" width="100%" height="12">
           
        </td>
      </tr>
    </tbody>
  </table>
  <table class="btn btn-primary" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important;">
    <tbody>
      <tr>
        <td style="line-height: 24px; font-size: 16px; border-radius: 6px; margin: 0;" align="center" bgcolor="#0d6efd">
          <a href="http://example.com" style="color: #ffffff; font-size: 16px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; border-radius: 6px; line-height: 20px; display: inline-block; font-weight: normal; white-space: nowrap; background-color: #0d6efd; padding: 8px 12px; border: 1px solid #0d6efd;">Space between these buttons</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
On this page