ant-design/components/space/index.en-US.md

category	group	title	cover	coverDark
Components	Layout	Space	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAAAAAAAADrJ8AQ/original	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 antd@4.24.0 Supported).

Difference with Flex component

• Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
• Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

Examples

Basic Usage Vertical Space Space Size Align Wrap Split Compact Mode for form component Button Compact Mode Vertical Compact Mode Input addon debug Nested Space Compact Diverse Child Flex gap style

API

Common props ref：Common props

Property	Description	Type	Default	Version
align	Align items	start | end |center |baseline	-	4.2.0
direction	The space direction	vertical | horizontal	horizontal	4.1.0
size	The space size	Size | Size[]	small	4.1.0 | Array: 4.9.0
split	Set split	ReactNode	-	4.7.0
wrap	Auto wrap line, when horizontal effective	boolean	false	4.9.0

Size

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

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
• InputNumber
• Select
• TimePicker
• TreeSelect

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

styles and classNames attribute

Property	Description	Version
item	set Space child element	5.6.0

Design Token