Spacing
Padding, margins and white-space between elements.
Overview
Spacing is commonly refered to as white space. It is the space between elements and defines the value for common properties such as padding and margin.
Scale
Nebula spacing is based on a 4px scale. This means each token is a multiple of 4. A pixel value can easily be converted to it's token form by dividing by 4. e.g. A 32px space, would be space.8.
| Token | Default Value |
|---|---|
| space.1 | 0.4rem |
| space.2 | 0.8rem |
| space.3 | 1.2rem |
| space.4 | 1.6rem |
| space.5 | 2rem |
| space.6 | 2.4rem |
| space.7 | 2.8rem |
| space.8 | 3.2rem |
| space.9 | 3.6rem |
| space.10 | 4.0rem |
| space.11 | 4.4rem |
| space.12 | 4.8rem |