Spacing

Spacing is related to both margin and padding

The implementation is a configuration of bootstrap spacing utility.

Current configuration values are:

$spacers: (
  1: 4px,    // 0.25rem
  2: 8px,    // 0.5rem
  3: 12px,   // 0.75rem
  4: 16px,   // 1rem
  5: 20px,   // 1.25rem
  6: 24px,   // 1.5rem
  7: 32px,   // 2rem
  8: 40px,   // 2.5rem
  9: 48px,   // 3rem
  10: 64px,  // 4rem
  11: 80px,  // 5rem
  12: 96px,  // 6rem
  13: 112px, // 7rem
  14: 160px, // 10rem
  15: 192px  // 12rem
);

Usage examples - Classes: (For more details lookup bootstrap spacing utility)

<div class="mx-4"></div> – Will add 1rem margin all around
<div class="mr-4"></div> – Will add 1rem margin right
<div class="px-4"></div> – Will add 1rem padding all around
<div class="pt-4"></div> – Will add 1rem padding top

Usage examples: (From code)

.test {
    margin: map-get($spacers, 4);
    padding: map-get($spacers, 4) map-get($spacers, 2);
}