---
title: Spacing
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/structure/Spacing
---

Provides spacing to any wrapped component. Spacing is provided as a tuple that can contain zero, one, two, three or four values. Each of these values is coming from the TYPE static property.

The structure of the tuple is very similar to how `margin` or `padding` properties work: specifying one value replicates them across the four sides, two across `top`/`bottom` and `left`/`right`, etc. If you are willing to omit a specific value, while passing others, you can use `OMIT` as a placeholder. The space on the side (or sides) where it is used will be left intact.

Other components from the SDK have spacing capabilities built-in. If you would like to replicate the same capability on your own component, you can use `Spacing.add` and pass the component; the component returned by the method will contain the `type` prop as well as the statics.

### Usage

```js
import { Spacing } from 'nr1'
```

### Props

| `children` node    | Element to space. Spacing can only be applied to one signle element at a time; to space multiple ones, each of them needs to be wrapped individually.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `className` string | Appends class names to the component.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `style` object     | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `type` enum\[]     | Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `TYPE.OMIT`. Spacing.TYPE.EXTRA_LARGE, Spacing.TYPE.LARGE, Spacing.TYPE.MEDIUM, Spacing.TYPE.NONE, Spacing.TYPE.OMIT, Spacing.TYPE.SMALL, Basic ````jsx <Spacing type={[Spacing.TYPE.MEDIUM]}>   <Button>Spaced button</Button> </Spacing>;             ```  Omit margins  ```jsx <Spacing type={[Spacing.TYPE.OMIT, Spacing.TYPE.LARGE]}>   <Button>Spaced button (only left and right)</Button> </Spacing>;  ```  ```` |

### Methods

### `Spacing.add`