# Space

> Cherry Space component - responsive vertical and horizontal spacing between elements.

Source: https://cherry.al/code/space

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Space

Space is an element that allows you to create spaces between elements. Whether you need horizontal or vertical spacing, the Space component has got you covered. It seamlessly adapts to different media queries.

The example below assumes the Cherry theme provider from [Installation](/code/installation) is already set up.

```jsx
import React from "react";
import { Container, Button, Space } from "cherry-styled-components";

export default function Page() {
  return (
    <Container>
      <Button>Button</Button>
      <Space $xs={20} $lg={40} />
      <Button>Button</Button>
    </Container>
  );
}
```

In the example above, two buttons have a space of 20px on extra small screens and 40px on large screens.

Every size prop also accepts the string `"none"`, which sets `display: none` and hides the spacer entirely at that breakpoint.

## Properties

<Field value="$size" type='number | "none"'>
  Space size in pixels.
</Field>

<Field value="$xs" type='number | "none"'>
  Size at `xs` breakpoint.
</Field>

<Field value="$sm" type='number | "none"'>
  Size at `sm` breakpoint.
</Field>

<Field value="$md" type='number | "none"'>
  Size at `md` breakpoint.
</Field>

<Field value="$lg" type='number | "none"'>
  Size at `lg` breakpoint.
</Field>

<Field value="$xl" type='number | "none"'>
  Size at `xl` breakpoint.
</Field>

<Field value="$xxl" type='number | "none"'>
  Size at `xxl` breakpoint.
</Field>

<Field value="$xxxl" type='number | "none"'>
  Size at `xxxl` breakpoint.
</Field>

<Field value="$horizontal" type="boolean">
  Creates horizontal spacing instead of vertical.
</Field>

<Button href="https://github.com/cherry-design-system/styled-components/blob/main/src/lib/space.tsx" icon="code" iconPosition="left">
  View Source
</Button>