import { Meta } from "@storybook/blocks";
import { Table, Row, Cell } from "./_story";

<Meta title="Styles/Spacing" />

# Spacing

Spacing tokens use a 4px scale.

The follow values can be used for `margin`, `padding` and `gap`.

`margin` also includes a negative scale and the `auto` keyword.

## Margin

Margin controls the spacing on the outside of an element.

<Table columns={["Classname", "Description"]}>
  <Row>
    <Cell>
      <code>{`m-{key}`}</code>, <code>{`-m-{key}`}</code>
    </Cell>
    <Cell>All sides (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mx-{key}`}</code>, <code>{`-mx-{key}`}</code>
    </Cell>
    <Cell>Left and right (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`my-{key}`}</code>, <code>{`-my-{key}`}</code>
    </Cell>
    <Cell>Top and bottom (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mt-{key}`}</code>, <code>{`-mt-{key}`}</code>
    </Cell>
    <Cell>Top (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mb-{key}`}</code>, <code>{`-mb-{key}`}</code>
    </Cell>
    <Cell>Bottom (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`ml-{key}`}</code>, <code>{`-ml-{key}`}</code>
    </Cell>
    <Cell>Left (positive, negative)</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`mr-{key}`}</code>, <code>{`-mt-{key}`}</code>
    </Cell>
    <Cell>Right (positive, negative)</Cell>
  </Row>
</Table>

## Padding

Padding controls the spacing on the inside of an element.

<Table columns={["Classname", "Description"]}>
  <Row>
    <Cell>
      <code>{`p-{key}`}</code>
    </Cell>
    <Cell>All sides</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`px-{key}`}</code>
    </Cell>
    <Cell>Left and right</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`py-{key}`}</code>
    </Cell>
    <Cell>Top and bottom</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pt-{key}`}</code>
    </Cell>
    <Cell>Top</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pb-{key}`}</code>
    </Cell>
    <Cell>Bottom</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pl-{key}`}</code>
    </Cell>
    <Cell>Left</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`pr-{key}`}</code>
    </Cell>
    <Cell>Right</Cell>
  </Row>
</Table>

## Gap

Gap is used to space items within grid and flexbox layouts.

<Table columns={["Classname", "Description"]}>
  <Row>
    <Cell>
      <code>{`gap-{key}`}</code>
    </Cell>
    <Cell>Both horizontal and vertical</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`gap-x-{key}`}</code>
    </Cell>
    <Cell>Horizontal</Cell>
  </Row>
  <Row>
    <Cell>
      <code>{`gap-y-{key}`}</code>
    </Cell>
    <Cell>Vertical</Cell>
  </Row>
</Table>