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}[-{breakpoint}]--{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.

{breakpoint}

Optionally include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile first library, any applying to smaller breakpoint will modify also larger ones unless other class overrides this behaviour.

• blank - leave blank to apply margin or padding to all breakpoints.
• sm - use to apply margin or padding to sm and larger breakpoints.
• md - use to apply margin or padding to ms and larger breakpoints.
• lg - use to apply margin or padding to lg and larger breakpoints.
• xl - use to apply margin or padding to xl breakpoints.

{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
• 7 - use to set margin or padding to $base-unit * 7
• 8 - use to set margin or padding to $base-unit * 8
• 9 - use to set margin or padding to $base-unit * 9
• 10 - use to set margin or padding to $base-unit * 10
• auto - use to set margin to auto value

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="-m--2"></div>
<div class="-m--4"></div>
<div class="-m--6"></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="-mt--3"></div>
<!-- margin-bottom -->
<div class="-mb--3"></div>
<!-- margin-left -->
<div class="-ml--3"></div>
<!-- margin-right -->
<div class="-mr--3"></div>
<!-- margin-left and margin-right -->
<div class="-mx--3"></div>
<!-- margin-top and margin-bottom -->
<div class="-my--3"></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="-p--2"></div>
<div class="-p--4"></div>
<div class="-p--6"></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="-pt--3"></div>
<!-- padding-bottom -->
<div class="-pb--3"></div>
<!-- padding-left -->
<div class="-pl--3"></div>
<!-- padding-right -->
<div class="-pr--3"></div>
<!-- padding-left and padding-right -->
<div class="-px--3"></div>
<!-- padding-top and padding-bottom -->
<div class="-py--3"></div>

Margin + Padding

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

<div class="-m--3 -p--3"></div>

Auto margin

Apply margin auto to an element

<div class="-m--auto"></div>

Breakpoints

Target specific breakpoints with reponsive classes.

<div class="-mx--0 -px--0 -mx-lg--6 -px-lg--6"></div>