间距 Space

设置组件之间的间距。

安装

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[]	`small`	-
style	节点样式	CSSProperties	`-`	-

SpaceSize

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