import { Meta } from "@storybook/addon-docs";
# Spacing
Space units create visual rhythm and balance.
## Using spacing tokens
TipSpacing are defined as CSS Custom properties,
to use them, use: var(--spacing-4) as the CSS property value.
```
padding: var(--spacing-4);
padding-bottom: var(--spacing-4);
gap: var(--spacing-4);
```
### How to apply space units
1 / Use small spacers (`--spacing-1` to `--spacing-4`) between elements that have a close functional relationship. This indicates that they are related to each other.
2 / Use larger spacers (`--spacing-5` and up) to separate components that have weaker functional relationships or no relationship at all. This helps a user differentiate between one form field and the next.
The general rule is pretty simple: Start with the largest spacing unit and work your way down. This keeps the interface feeling airy and less cramped. There are times where you would want to use smaller spacers, for example, when you have a lot of data that needs to be easily scanable without any interaction from the user.