# Spacing
The spacing scale should be used for spacing between elements such as padding, margin, top, right, bottom, left etc.
| Spacing unit | space in pixels |
|---|---|
| $space | 4px |
| $space-x2 | 8px |
| $space-x3 | 12px |
| $space-x4 | 16px |
| $space-x5 | 20px |
| $space-x6 | 24px |
| $space-x7 | 28px |
| $space-x8 | 32px |
| $space-x9 | 36px |
| $space-x10 | 40px |
| $space-x11 | 44px |
| $space-x12 | 48px |
| $space-x16 | 64px |
| $space-x18 | 72px |
| $space-x20 | 80px |
| $space-x24 | 96px |
| $space-x32 | 128px |
| $space-x40 | 160px |
| $space-x48 | 192px |
| $space-x56 | 224px |
| $space-x64 | 256px |
# Using the spacing scale
The example below demonstrates using the spacing scale variables to apply margin-bottom to elements, but it can be used in the same way to apply any space related rule.
margin-bottom: $space;
margin-bottom: $space-x2;
margin-bottom: $space-x3;
margin-bottom: $space-x4;
margin-bottom: $space-x5;
margin-bottom: $space-x6;
margin-bottom: $space-x7;
margin-bottom: $space-x8;
margin-bottom: $space-x9;
margin-bottom: $space-x10;
margin-bottom: $space-x11;
margin-bottom: $space-x12;
margin-bottom: $space-x16;
margin-bottom: $space-x18;
margin-bottom: $space-x20;
margin-bottom: $space-x24;
margin-bottom: $space-x32;
margin-bottom: $space-x40;
margin-bottom: $space-x48;
margin-bottom: $space-x56;
margin-bottom: $space-x64;