ant-design/components/space/index.zh-CN.md

category	group	subtitle	title	cover	coverDark
Components	布局	间距	Space	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original

设置组件之间的间距。

何时使用

避免组件紧贴在一起，拉开统一的空间。

• 适合行内元素的水平间距。
• 可以设置各种水平对齐方式。
• 需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact（自 antd@4.24.0 版本开始提供该组件）。

与 Flex 组件的区别

• Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。
• Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。

代码演示

基本用法 垂直间距 间距大小 对齐 自动换行 分隔符 紧凑布局组合 Button 紧凑布局 垂直方向紧凑布局 调试 Input 前置/后置标签 紧凑布局嵌套 多样的 Child Flex gap 样式

API

通用属性参考：通用属性

Space

参数	说明	类型	默认值	版本
align	对齐方式	start | end |center |baseline	-	4.2.0
direction	间距方向	vertical | horizontal	horizontal	4.1.0
size	间距大小	Size | Size[]	small	4.1.0 | Array: 4.9.0
split	设置拆分	ReactNode	-	4.7.0
wrap	是否自动换行，仅在 horizontal 时有效	boolean	false	4.9.0

Size

'small' | 'middle' | 'large' | number

Space.Compact

自 antd@4.24.0 版本开始提供该组件。

需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：

• Button
• AutoComplete
• Cascader
• DatePicker
• Input/Input.Search
• InputNumber
• Select
• TimePicker
• TreeSelect

参数	说明	类型	默认值	版本
block	将宽度调整为父元素宽度的选项	boolean	false	4.24.0
direction	指定排列方向	vertical | horizontal	horizontal	4.24.0
size	子组件大小	large | middle | small	middle	4.24.0

styles 和 classNames 属性

名称	说明	版本
item	设置 Space 包裹的子组件	5.6.0

主题变量（Design Token）