---
name: Spacing
menu: Patterns
parent: Styles
route: /styles/spacing
---

# Spacing

Spacing units are based on the same scale as [Typography](/styles/typography) to help keep them in proportion with each other.

## Scale

```specimen-react
<DocTable>
  <thead>
    <tr>
      <th>Step Name</th>
      <th>viewport: {'<'} 731</th>
      <th>viewport: 731 {'-'} 1694</th>
      <th>viewport: 1695+</th>
    </tr>
  </thead>
  <tbody>
    {spacing.map(spaceStep => (
      <tr key={spaceStep.title}>
        <td>{spaceStep.title}</td>

        {spaceStep.breakpoints.map(breakpoint => (
          <td key={breakpoint}>
            {breakpoint}
            <div
              style={{
                width: breakpoint,
                height: breakpoint,
                background: spaceStep.color,
                borderRadius: spaceStep.borderRadius,
              }}
            />
          </td>
        ))}
      </tr>
    ))}
  </tbody>
</DocTable>
```

## Vspace

> `Vspace` lets you insert space between child flow elements, creating a regular rhythm without 'left over' margins at the top or bottom. For example, the elements inside the following `Vspace` element will have an `earth` size margin separating them on the vertical axis (`earth` is default):

```specimen-react
<Vspace>
  <h2>A heading</h2>
  <p>Lorem ipsum</p>
  <p>Dolor sit amet</p>
</Vspace>
```

### Nesting

You can quickly divide the flow content into visually distinct sections, by nesting `Vspace` elements. In the following, the two sections are separated by a space of the `saturn` spacing, while elements within each of the two sections are spaced using the default `earth` spacing.

```specimen-react
<Vspace spacing="saturn">
  <Vspace>
    <h2>First section heading</h2>
    <p>Lorem ipsum</p>
    <p>Dolor sit amet</p>
  </Vspace>
  <Vspace>
    <h2>Second section heading</h2>
    <p>Lorem ipsum</p>
    <p>Dolor sit amet</p>
  </Vspace>
</Vspace>
```

You can override the generic spacing within a ‘Vspace’ on a per-element basis.
