# Space

- Page: https://jiguang132.com/resources/arco-design/docs/space
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Set the spacing between components.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage of spacing components.
- **Vertical**: You can set the spacing in the vertical direction.
- **Size**: Built-in 4 sizes, `mini-4px` `small-8px (default)` `medium-16px` `large-24px`, and also support to pass numbers to customize the size.
- **Align**: There are 4 built-in alignment methods, namely `start` `center` `end` `baseline`, and the default is `center` in horizontal mode.
- **Wrap**: Surround type spacing, there are spacing on all sides, generally used in the scene of line wrapping.
- **Split**: Set separators for adjacent child elements.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Space

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|wrap|Whether to wrap line automatic|boolean |`-`|-|
|align|Alignment of items|'start' \| 'end' \| 'center' \| 'baseline' |`-`|-|
|direction|The space direction|'vertical' \| 'horizontal' |`horizontal`|-|
|split|Set separator|ReactNode |`-`|2.22.0|
|className|Additional css class|string \| string[] |`-`|-|
|size|The space size. ( Array format add in `2.15.0` )|[SpaceSize](#spacesize) \| [SpaceSize](#spacesize)[] |`small`|-|
|style|Additional style|CSSProperties |`-`|-|

### SpaceSize

```js
export type SpaceSize = "mini" | "small" | "medium" | "large" | number;
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt