```ts
import Spacer from '~/components/ui/Spacer.vue'
```
# Spacer
Add a 16px gap between adjacent items.
##### Without spacer
```vue-html
AB
```
AB
##### With spacer
```vue-html{2}
AB
```
AB
##### Spacers can also be added for horizontal space
```vue-html{4}
ABC
```
ABC
## Modify the size of a Spacer
```vue
AB
```
{{ size }}px
AB
Note the `+` before `size`. Some browsers will output a string for the `Input` value, and the JavaScript `+` prefix parses it into a number. Spacers need numeric `size` values because positive size values affect the dimensions of the element while negative sizes cause negative margins.
## Make the Spacer elastic (responsive)
```vue-html
```
{{ size }}%
## Restrict the dimension of a spacer with the `v` and `h` props
By default, a spacer is square. You can make it horizontal with `h` and vertical with `v`. See the example in the following section.
## Use the Spacer to vary an element's dimensions
```vue-html
```