Margin & Padding

You can check the full list of available breakpoints here.

By default the available margin and padding classes are 0px to 80px in steps of 5, but you can modify them according to your needs.

Customize your project

Margin

*:mrg-top-*
*:mrg-right-*
*:mrg-bottom-*
*:mrg-left-*
*:mrg-bt-* (bottom and top)
*:mrg-lr-* (left and right)
*:mrg-all-*

You can also use negative margins including - before mrg for example x:-mrg-bottom-20


<div class="line">
  <div class="x:scol-3 x:top">
    <p class="x:mrg-top-50">Lorem ipsum</p>
  </div>
  <div class="x:scol-3 x:top">
    <p class="s:mrg-right-80">Lorem ipsum</p>
  </div>
  <div class="x:scol-3 x:top">
    <p class="x:mrg-bottom-75">Lorem ipsum</p>
  </div>
  <div class="x:scol-3 x:top">
    <p class="s:mrg-left-20">Lorem ipsum</p>
  </div>
  <div class="x:scol-6 x:top">
    <p class="x:mrg-bt-50">Lorem ipsum</p>
  </div>
  <div class="x:scol-6 x:top">
    <p class="x:mrg-lr-20 s:mrg-lr-50">Lorem ipsum</p>
  </div>
</div>

Lorem ipsum

Padding

*:pad-top-*
*:pad-right-*
*:pad-bottom-*
*:pad-left-*
*:pad-bt-* (bottom and top)
*:pad-lr-* (left and right)
*:pad-all-*


<div class="line">
  <div class="x:scol-3 x:top">
    <p class="x:pad-top-50">Lorem ipsum</p>
  </div>
  <div class="x:scol-3 x:top">
    <p class="s:pad-right-80">Lorem ipsum</p>
  </div>
  <div class="x:scol-3 x:top">
    <p class="x:pad-bottom-75">Lorem ipsum</p>
  </div>
  <div class="x:scol-3 x:top">
    <p class="s:pad-left-20">Lorem ipsum</p>
  </div>
  <div class="x:scol-6 x:top">
    <p class="x:pad-bt-50">Lorem ipsum</p>
  </div>
  <div class="x:scol-6 x:top">
    <p class="x:pad-lr-20 s:pad-lr-50">Lorem ipsum</p>
  </div>
</div>

Lorem ipsum