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

Class Result
{padding, p or margin, m }-{ 0-7 } Set padding or margin from 0-6.5rem.

x y axis

Class

Class Result
{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).

top bottom left right

Class

Class Result
{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)
);