v1.8.12

Spacers

Padding and margin

How does it work

Using our padding and margin utilities is simple. It’s what you’re setting, the direction, and the number based on our spacing map.

{padding, p or margin, m }{ direction if not surrounding: t, b, l, r, x, y }-{ number }

basic

Class

ClassResult
{padding, p or margin, m }-{ 0-7 }

Set padding or margin from 0-6.5rem.

x y axis

Class

ClassResult
{padding, p or margin, m }x-{ 0-7 }

Set padding or margin from 0-6.5rem on the x-axis (left and right).

{padding, p or margin, m }y-{ 0-7 }

Set padding or margin from 0-6.5rem on the y-axis (top and bottom).

mx-auto

Center an element with margin: 0 auto

top bottom left right

Class

ClassResult
{padding, p or margin, m }{ t, b, l, r}-{ 0-7 }

Set padding or margin from 0-6.5rem for top, bottom, left, and right.

Markup

$spacer: 1rem;
$spacers: (
  0: 0,
  1: ($spacer * .25),
  2: ($spacer * .5),
  3: $spacer,
  4: ($spacer * 2),
  5: ($spacer * 3),
  6: ($spacer * 4.5),
  7: ($spacer * 6.5)
);