Spacing

Use shorthand margin and padding utility classes to control spacing between elements.

Notation

Spacing utility classes can be defined using the format -{property}{sides}{size}.

{property}

• m - use to apply margin
• p - use to apply padding

{sides}

• t - use to apply margin-top or padding-top
• b - use to apply margin-bottom or padding-bottom
• l - use to apply margin-left or padding-left
• r - use to apply margin-right or padding-right
• x - use to apply margin-left and margin-right or padding-left and padding-right
• y - use to apply margin-top and margin-bottom or padding-top and padding-bottom
• blank - leave blank to apply margin or padding to all 4 sides.

{size}

• 0 - use to eliminate existing margin or padding and set to 0
• 1 - use to set margin or padding to $base-unit
• 2 - use to set margin or padding to $base-unit * 2
• 3 - use to set margin or padding to $base-unit * 3
• 4 - use to set margin or padding to $base-unit * 4
• 5 - use to set margin or padding to $base-unit * 5
• 6 - use to set margin or padding to $base-unit * 6

Examples

Margins

In this example, various margin classes have been applied to render margin on all 4 sides of the pink squares. The margin can be visualized in blue.

<div class="-m2"></div>
<div class="-m4"></div>
<div class="-m6"></div>

Side Margins

Apply margin to specific sides of an element by adding t, b, l, r, x or y to the class name.

<!-- margin-top -->
<div class="-mt3"></div>
<!-- margin-bottom -->
<div class="-mb3"></div>
<!-- margin-left -->
<div class="-ml3"></div>
<!-- margin-right -->
<div class="-mr3"></div>
<!-- margin-left and margin-right -->
<div class="-mx3"></div>
<!-- margin-top and margin-bottom -->
<div class="-my3"></div>

Padding

In this example, various padding classes have been applied to render padding on all 4 sides of the pink squares. The padding can be visualized in yellow.

<div class="-p2"></div>
<div class="-p4"></div>
<div class="-p6"></div>

Side Paddings

Apply padding to specific sides of an element by adding t, b, l, r, x or y to the class name.

<!-- padding-top -->
<div class="-pt3"></div>
<!-- padding-bottom -->
<div class="-pb3"></div>
<!-- padding-left -->
<div class="-pl3"></div>
<!-- padding-right -->
<div class="-pr3"></div>
<!-- padding-left and padding-right -->
<div class="-px3"></div>
<!-- padding-top and padding-bottom -->
<div class="-py3"></div>

Margin + Padding

Apply both margin and padding to an element by adding both class names.

<div class="-m3 -p3"></div>