Spacing

Our helpers for setting spacing for both margin and padding. You can configure the spacing class with options in this format: .wb-u-{type}-{side}-{multiplier}

Types

  • margin
  • padding

Sides:

  • t - top
  • r - right
  • b - bottom
  • l - left
  • v - vertical (top and bottom)
  • h - horizontal (left and right)
  • a - all sides (top, left, bottom right)

Multipliers:

  • 0 - 0
  • 1 - 5px
  • 2 - 10px
  • 4 - 20px
  • 6 - 30px
  • 8 - 40px
  • 12 - 60px

Note that you can chain spacing classes:

For example, if you want 5px of padding on the top and bottom, and 10px of padding on the left and right, you would chain these two classes:

.wb-u-padding-v-1.wb-u-padding-h-2

The classes do not overide each other, unless they both set a value for the same side, like wb-margin-v-x and wb-margin-t-x.

Margin

Class .wb-u-margin-{t,r,b,l,v,h,a}-{0,1,2,4,6,8,12}

Our base spacing variable is set to 5px. The number at the end of the class is a multiplier, so $wb-u-margin-l-4 gives a left margin of 20px.

I have a left margin of 0
I have a left margin of 5
I have a left margin of 10
I have a left margin of 20
I have a left margin of 30
I have a left margin of 40
I have a left margin of 60
<div class='example-colored-row wb-u-margin-l-0'>I have a left margin of 0</div>
<div class='example-colored-row wb-u-margin-l-1'>I have a left margin of 5</div>
<div class='example-colored-row wb-u-margin-l-2'>I have a left margin of 10</div>
<div class='example-colored-row wb-u-margin-l-4'>I have a left margin of 20</div>
<div class='example-colored-row wb-u-margin-l-6'>I have a left margin of 30</div>
<div class='example-colored-row wb-u-margin-l-8'>I have a left margin of 40</div>
<div class='example-colored-row wb-u-margin-l-12'>I have a left margin of 60</div>

Padding

Class .wb-u-padding-{t,r,b,l,v,h,a}-{0,1,2,4,6,8,12}

Our base spacing variable is set to 5px. The number at the end of the class is a multiplier, so $wb-u-padding-v-4 gives a top and bottom padding of 20px.

I have a top and bottom padding of 0
I have a top and bottom padding of 5
I have a top and bottom padding of 10
I have a top and bottom padding of 20
I have a top and bottom padding of 30
I have a top and bottom padding of 40
I have a top and bottom padding of 60
<div class='example-colored-row wb-u-padding-v-0'>I have a top and bottom padding of 0</div>
<div class='example-colored-row wb-u-padding-v-1'>I have a top and bottom padding of 5</div>
<div class='example-colored-row wb-u-padding-v-2'>I have a top and bottom padding of 10</div>
<div class='example-colored-row wb-u-padding-v-4'>I have a top and bottom padding of 20</div>
<div class='example-colored-row wb-u-padding-v-6'>I have a top and bottom padding of 30</div>
<div class='example-colored-row wb-u-padding-v-8'>I have a top and bottom padding of 40</div>
<div class='example-colored-row wb-u-padding-v-12'>I have a top and bottom padding of 60</div>