Space

Set components spacing.
Import
Source components/space
Docs Edit this page

When To Use#

  • Avoid components clinging together and set a unified space.
  • Use <nz-space-compact> when child form components are compactly connected and the border is collapsed.

The difference with Flex component is:

  • 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

Crowded components horizontal spacing.

expand codeexpand code
      Loading...
Card

Card content

Card content

Card

Card content

Card content

Vertical Space

Crowded components vertical spacing.

expand codeexpand code
      Loading...
Link
Space Size

large, middle and small preset sizes.

Set the nzSize to large and middle by setting size to large and middle respectively. If size is not set, the spacing is small.

expand codeexpand code
      Loading...
center
Block
start
Block
end
Block
baseline
Block
Align

Config item align.

expand codeexpand code
      Loading...
Link
Customize Size

Custom spacing size.

expand codeexpand code
      Loading...
Link
Link
Link
Split

Crowded components split.

expand codeexpand code
      Loading...




Zhejianggggg

Zhejianggggg

Option1




Option1-1 Option1-2
Between
Sign Up
Please select

leaf 1-0-0

Http://.com$
$
Compact Mode

Compact Mode for form component.

expand codeexpand code
      Loading...


Button Compact Mode

Button component compact example.

expand codeexpand code
      Loading...
Vertical Compact Mode

Vertical Mode for Space.Compact, support Button only.

expand codeexpand code
      Loading...

API#

nz-space#

PropertyDescriptionTypeDefaultGlobal Config
[nzSize]The space size'small' | 'middle' | 'large' | numbersmall✅
[nzDirection]The space direction'vertical' | 'horizontal'horizontal
[nzAlign]Align items'start' | 'end' | 'baseline' | 'center'-
[nzWrap]Auto wrap line, when horizontal effectivebooleanfalse
[nzSplit]Set splitTemplateRef | string-

nz-space-compact#

Use <nz-space-compact> when child form components are compactly connected and the border is collapsed. The supported components are：

  • Button
  • Cascader
  • DatePicker
  • Input
  • Select
  • TimePicker
  • TreeSelect
参数说明类型默认值支持全局配置
[nzBlock]Option to fit width to its parent's widthbooleanfalse
[nzDirection]Set direction of layout'vertical' | 'horizontal''horizontal'
[nzSize]Set child component size'large' | 'default' | 'small''default'