---
title: Spacer
description: 'Spacer is a primitive layout component that providers inner (padding) or outer (margin) space in-between components. It can also be used to adaptively provide space within an HStack or VStack.'
type: layout
slug: /components/spacer/
keywords: ['spacer', 'layout', 'flex', 'block']
---

# Spacer

`Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`.

## Table of contents

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

-   [Usage](#usage)
-   [Props](#props)
-   [See Also](#see-also)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

<!-- Automatically Generated. DO NOT EDIT THIS FILE. -->
<!-- Instead, edit packages/website/src/docs/components/foundations/spacer.mdx -->

<!-- props -->

<!-- Automatically Generated -->

## Usage

`Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).

```jsx live
import { Spacer } from '@wp-g2/components';

function Example() {
	return (
		<View>
			<Spacer>
				<Heading>Into The Unknown</Heading>
			</Spacer>
			<Text>
				Every day's a little harder as I feel your power grow. Don't you
				know there's part of me that longs to go.
			</Text>
		</View>
	);
}
```

## Props

##### m

**Type**: `number`

Adjusts all margins.

##### mb

**Type**: `number`

Adjusts bottom margins.

##### ml

**Type**: `number`

Adjusts left margins.

##### mr

**Type**: `number`

Adjusts right margins.

##### mt

**Type**: `number`

Adjusts top margins.

##### mx

**Type**: `number`

Adjusts left and right margins.

##### my

**Type**: `number`

Adjusts top and bottom margins.

##### p

**Type**: `number`

Adjusts all padding.

##### pb

**Type**: `number`

Adjusts bottom padding.

##### pl

**Type**: `number`

Adjusts left padding.

##### pr

**Type**: `number`

Adjusts right padding.

##### pt

**Type**: `number`

Adjusts top padding.

##### px

**Type**: `number`

Adjusts left and right padding.

##### py

**Type**: `number`

Adjusts top and bottom padding.

<!-- /Automatically Generated -->
<!-- /props -->

## See Also

-   [`Flex`](../flex/)
-   [`HStack`](../hstack/)
-   [`VStack`](../vstack/)