> ## Documentation Index
> Fetch the complete documentation index at: https://docs.htmldocs.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Spacer
> Add flexible spacing between elements
The `Spacer` component allows you to add customizable vertical or horizontal space between elements in your document.
## Usage
Use the `Spacer` component to create gaps between content. You can specify either `height` or `width`.
```jsx Vertical Spacer theme={null}
```
```jsx Horizontal Spacer theme={null}
```
```jsx Full Example theme={null}
import Document from './Document';
import Page from './Page';
import Head from './Head';
import Spacer from './Spacer';
const MyDocument = () => (
My Document
Welcome to My Document
This is the first paragraph of my document.
Section 1
Content for section 1 goes here.
Section 2
Content for section 2 goes here.
);
export default MyDocument;
```
## Props
Vertical space the spacer takes up. Use a number for pixels, a string for other units, or `true` for 100%.
Horizontal space the spacer takes up. Use a number for pixels, a string for other units, or `true` for 100%.
CSS display property of the spacer.
## Comparison to LaTeX
The `Spacer` component serves a similar purpose to LaTeX's vertical and horizontal spacing commands:
* `Spacer` with `height` is similar to LaTeX's `\vspace{}`
* `Spacer` with `width` is similar to LaTeX's `\hspace{}`
However, `Spacer` offers more flexibility:
1. **Units**: While LaTeX typically uses pt, em, or ex, `Spacer` can use any CSS unit.
2. **Responsiveness**: `Spacer` can adapt to different screen sizes more easily.
3. **Simplicity**: `Spacer` uses a single component for both vertical and horizontal spacing.
```jsx Spacer Example theme={null}
```
```latex LaTeX Equivalent theme={null}
\vspace{20pt}
```