---
name: Vspace
menu: Patterns
parent: Modules
route: /patterns/vspace
---

# Vspace

> The **Vspace** convenience component lets you insert space between child flow elements, creating a regular rhythm without 'left over' margins at the top or bottom.

## Basic 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>
```

## `spacing` prop

As spacing is delegated from the parent **Vspace**, it is easy to increase the spacing using `spacing`, which accepts a string from the space modular scale. This example has the `spacing` prop `sun`.

```specimen-react
<Vspace spacing="sun">
  <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>
```

## Overrides

Some components, such as the **Text** component, take their own `spacing` prop, allowing you to override the generic spacing within a **Vspace** on a per-element basis.

## `padding` prop

In addition, there is a `padding` prop which lets you add left padding on **Vspace** elements. It is unlikely you will need this in most cases, since parent components take care of margins and padding for you. The `padding` prop also takes a modular scale space string.

```specimen-react
<Vspace spacing="saturn" padding="earth">
  <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>
```
