---
name: Spacing
category: Structure
keywords:
  - Spacing
  - spacer
  - margin
  - padding
  - blank space
---

# Spacing

This component serves two main purposes: functional spacing css (margin and padding), and providing a blank space for layout purposes.

## Functional Spacing CSS

Sometimes you need a one-off bit of margin or padding to get things to lay out properly. You can use this component for that.

Either use `margin="tight"` or `padding`, etc. to give margin/padding in all directions. Or use `marginTop="loose"` or `paddingBottom` to give margin/padding in a specific direction.

## Blank Space

Sometimes you have a form that looks like this:

```
XXXXXXX | XXXXXXX | XXXXXXX
XXXXXXXXXXXX | XXXXXXXXXXXX
```

Now you can put a Spacing object in there:

```
XXXXXXX | XXXXXXX | XXXXXXX
XXXXXXX | XXXXXXX | Spacing
```

And it will lay out properly:

```
XXXXXXX | XXXXXXX | XXXXXXX
XXXXXXX | XXXXXXX
```