# 间距 Space

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/space
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

设置组件之间的间距。

## 安装

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

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：间距组件的基本用法。
- **垂直间距**：可以设置垂直方向排列的间距。
- **尺寸**：内置 4 个尺寸，`mini - 4px` `small - 8px (默认)` `medium - 16px` `large - 24px`，也支持传数字来自定义尺寸。
- **对齐**：内置 4 种对齐方式，分别为 `start` `center` `end` `baseline`，在水平模式下默认为 `center`。
- **环绕间距**：环绕类型的间距，四周都有间距，一般用于换行的场景。
- **分隔符**：为相邻子元素设置分隔符。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Space

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|wrap|环绕类型的间距，用于折行的场景。|boolean |`-`|-|
|align|对齐方式|'start' \| 'end' \| 'center' \| 'baseline' |`-`|-|
|direction|间距方向|'vertical' \| 'horizontal' |`horizontal`|-|
|split|设置分隔符|ReactNode |`-`|2.22.0|
|className|节点类名|string \| string[] |`-`|-|
|size|尺寸。( `2.15.0` 开始支持数组形式 )|[SpaceSize](#spacesize) \| [SpaceSize](#spacesize)[] |`small`|-|
|style|节点样式|CSSProperties |`-`|-|

### SpaceSize

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

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt