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).

Examples

Basic Usage Vertical Space Space Size Align Customize Size 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

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
• 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