JGuang
EN

间距

Space · Ant Design

交互预览
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

间距

设置组件之间的间距。

何时使用

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

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

与 Flex 组件的区别

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

代码演示

  • 基本用法 · base

  • 垂直间距 · vertical

  • 间距大小 · size

  • 对齐 · align

  • 自动换行 · wrap

  • 分隔符 · separator

  • 紧凑布局组合 · compact

  • Button 紧凑布局 · compact-buttons

  • 垂直方向紧凑布局 · compact-button-vertical

  • 自定义语义结构的样式和类 · style-class

API

通用属性参考：通用属性

Space

参数说明类型默认值版本全局配置
align对齐方式start | end |center |baseline-4.2.0×
classNames用于自定义组件内部各语义化结构的 class，支持对象或函数Record<SemanticDOM, string> | (info: { props: SpaceProps })=> Record<SemanticDOM, string>-5.6.0
direction间距方向vertical | horizontalhorizontal4.1.0×
orientation间距方向vertical | horizontalhorizontal×
size间距大小Size | Size[]small4.1.0 | Array: 4.9.05.6.0
split设置分隔符, 请使用 separator 替换ReactNode-4.7.0×
separator设置分隔符ReactNode--×
styles用于自定义组件内部各语义化结构的行内 style，支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props: SpaceProps })=> Record<SemanticDOM, CSSProperties>-5.6.0
vertical是否垂直，和 orientation 同时配置以 orientation 优先booleanfalse-×
wrap是否自动换行，仅在 horizontal 时有效booleanfalse4.9.0×

Size

'small' | 'medium' | 'large' | number

Space.Compact

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

  • Button
  • AutoComplete
  • Cascader
  • DatePicker
  • Input/Input.Search
  • InputNumber
  • Select
  • TimePicker
  • TreeSelect
参数说明类型默认值版本
block将宽度调整为父元素宽度的选项booleanfalse4.24.0
direction指定排列方向vertical | horizontalhorizontal4.24.0
orientation指定排列方向vertical | horizontalhorizontal
size子组件大小large | medium | smallmedium4.24.0
vertical是否垂直，和 orientation 同时配置以 orientation 优先booleanfalse-

Space.Addon

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

用于在紧凑布局中创建自定义单元格。

参数说明类型默认值版本
children自定义内容ReactNode-5.29.0

Semantic DOM

语义节点原生说明版本
root根元素，包含 flex 布局、间隙设置、对齐方式、换行等间距容器的基础样式—
item包裹的子组件，包含间距项的布局和样式，为每个子元素提供包装用于内联对齐—
separator分隔符，包含分隔元素的样式—

语义说明来源: vendor/components/space/demo/_semantic.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

原生 ComponentToken 未声明可直接提取的自有字段；共享令牌或继承关系以以下声明为准。

声明来源: 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;
}

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

参数说明类型默认值
style自定义样式CSSProperties-
className自定义类名string-
rootClassName添加在组件最外层的 classNamestring-
autoFocus自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效booleanfalse

安装并复现示例

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

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

  • 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

来源与许可

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

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。