Space

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 · base
Vertical Space · vertical
Space Size · size
Align · align
Wrap · wrap
separator · separator
Compact Mode for form component · compact
Button Compact Mode · compact-buttons
Vertical Compact Mode · compact-button-vertical
Custom semantic dom styling · style-class

API

Common props ref：Common props

Space

Property	Description	Type	Default	Version	Global Config
align	Align items	`start` \| `end` \|`center` \|`baseline`	-	4.2.0	×
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props: SpaceProps })=> Record<SemanticDOM, string>	-		5.6.0
~~direction~~	The space direction	`vertical` \| `horizontal`	`horizontal`	4.1.0	×
orientation	The space direction	`vertical` \| `horizontal`	`horizontal`		×
size	The space size	Size \| Size[]	`small`	4.1.0 \| Array: 4.9.0	5.6.0
~~split~~	Set split, please use `separator` instead	ReactNode	-	4.7.0	×
separator	Set separator	ReactNode	-	-	×
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props: SpaceProps })=> Record<SemanticDOM, CSSProperties>	-		5.6.0
vertical	Orientation, Simultaneously configure with `orientation` and prioritize `orientation`	boolean	false	-	×
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：

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
orientation	Set direction of layout	`vertical` \| `horizontal`	`horizontal`
vertical	Orientation, Simultaneously configure with `orientation` and prioritize `orientation`	boolean	false	-
size	Set child component size	`large` \| `medium` \| `small`	`medium`	4.24.0

Space.Addon

This component is available since antd@5.29.0.

Used to create custom cells in compact layouts.

Property	Description	Type	Default	Version
children	Custom content	ReactNode	-	5.29.0

Semantic DOM

Semantic node	Native description	Version
`root`	Root element with flex layout, gap settings, alignment, wrap and other spacing container basic styles	—
`item`	Wrapped item element with spacing item layout and styles, providing wrapper for each child element for inline alignment	—
`separator`	Separator element with divider styling	—

Semantic description source: vendor/components/space/demo/_semantic.tsx

Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

Native ComponentToken declares no directly extractable own fields. Shared tokens and inheritance are defined by the declarations below.

Declaration source: vendor/components/space/style/index.ts

import type { CSSObject } from '@ant-design/cssinjs';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

/** Component only token. Which will handle additional calculation of alias token */
// biome-ignore lint/suspicious/noEmptyInterface: ComponentToken need to be empty by default
export interface ComponentToken {}

interface SpaceToken extends FullToken<'Space'> {
  spaceGapSmallSize: number;
  spaceGapMiddleSize: number;
  spaceGapLargeSize: number;
}

Shared native props

Tips: The following generic properties apply to most antd components; those not supported are described separately.

Property	Description	Type	Default
style	The additional style	CSSProperties	-
className	The additional css class	string	-
rootClassName	ClassName on the root element	string	-
autoFocus	Auto focus when component mounted, only effective for focusable elements like forms, links, etc.	boolean	false

Install and reproduce an example

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

vendor/components/space/Addon.tsx
vendor/components/space/Compact.tsx
vendor/components/space/Item.tsx
vendor/components/space/context.ts
vendor/components/space/index.tsx
vendor/components/space/style/addon.ts
vendor/components/space/style/compact.ts
vendor/components/space/style/index.ts

Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.