# Spacing

Padding, margins and white-space between elements.

Section: foundations
Docs: https://nebula.kaluza.com/foundations/spacing

---

## Overview
Spacing is commonly referred 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 its token form by dividing by 4. For example, a 32px space is `space.8`.

Additionally we also include some "semantic" values for specific cases - between form fields for example.

<Stack spaceBetween={4}>
    <Card inline>
        <Inline spaceBetween={4}>
            <Block width={1} height={1} />
            <Block width={2} height={2} />
            <Block width={3} height={3} />
            <Block width={4} height={4} />
            <Block width={5} height={5} />
            <Block width={6} height={6} />
            <Block width={7} height={7} />
            <Block width={8} height={8} />
            <Block width={9} height={9} />
            <Block width={10} height={10} />
            <Block width={11} height={11} />
            <Block width={12} height={12} />
        </Inline>
    </Card>
    _Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_
</Stack>