---
category: Components
type: Layout
title: Space
cols: 1
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original
---

Set components spacing.

## When To Use

- Avoid components clinging together and set a unified space.
- Use Space.Compact when child form components are compactly connected and the border is collapsed (After version `ant-design-vue@4.0.0` Supported).

## API

### Space

| Property  | Description                                 | Type                                       | Default      | Version |
| --------- | ------------------------------------------- | ------------------------------------------ | ------------ | ------- |
| align     | Align items                                 | `start` \| `end` \|`center` \|`baseline`   | -            | 1.6.5   |
| direction | The space direction                         | `vertical` \| `horizontal`                 | `horizontal` | 1.6.5   |
| size      | The space size                              | `small` \| `middle` \| `large` \| `number` | `small`      | 1.6.5   |
| split     | Set split                                   | VueNode \| v-slot                          | -            | 2.2.0   |
| wrap      | Auto wrap line, when `horizontal` effective | boolean                                    | false        | 2.2.0   |

### Space.Compact

Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are：

- Button
- AutoComplete
- Cascader
- DatePicker
- Input/Input.Search
- Select
- TimePicker
- TreeSelect

| Property  | Description                                | Type                           | Default      | Version |
| --------- | ------------------------------------------ | ------------------------------ | ------------ | ------- |
| block     | Option to fit width to its parent\'s width | boolean                        | false        | 4.0.0   |
| direction | Set direction of layout                    | `vertical` \| `horizontal`     | `horizontal` | 4.0.0   |
| size      | Set child component size                   | `large` \| `middle` \| `small` | `middle`     | 4.0.0   |
