logoNamu Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
1.0.0
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic Usage
Vertical Space
Space Size
Align
Customize Size
Wrap
Split
Compact Mode for form component
Button Compact Mode
Vertical Compact Mode
API
Size
Space.Compact
styles and classNames attribute
Design Token

Space

    • LayoutAnchor

    Resources

    Namu Design Charts
    Namu Design Pro
    Namu Design Pro Components
    Namu Design Mobile
    Namu Design Mini
    Namu Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design in YuQue
    Namu Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Namu Design Community

    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

    Crowded components horizontal spacing.

    expand codeexpand code
    Vertical Space

    Crowded components vertical spacing.

    expand codeexpand code
    Space Size

    large, middle and small preset sizes.

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

    expand codeexpand code
    Align

    Config item align.

    expand codeexpand code
    Customize Size

    Custom spacing size.

    expand codeexpand code
    Wrap

    Auto wrap line.

    expand codeexpand code
    Split

    Crowded components split.

    expand codeexpand code
    Compact Mode for form component

    Compact Mode for form component.

    expand codeexpand code
    Button Compact Mode

    Button component compact example.

    expand codeexpand code
    Vertical Compact Mode

    Vertical Mode for Space.Compact, support Button only.

    expand codeexpand code

    API

    Common props ref：Common props

    PropertyDescriptionTypeDefaultVersion
    alignAlign itemsstart | end |center |baseline-4.2.0
    directionThe space directionvertical | horizontalhorizontal4.1.0
    sizeThe space sizeSize | Size[]small4.1.0 | Array: 4.9.0
    splitSet splitReactNode-4.7.0
    wrapAuto wrap line, when horizontal effectivebooleanfalse4.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
    PropertyDescriptionTypeDefaultVersion
    blockOption to fit width to its parent's widthbooleanfalse4.24.0
    directionSet direction of layoutvertical | horizontalhorizontal4.24.0
    sizeSet child component sizelarge | middle | smallmiddle4.24.0

    styles and classNames attribute

    PropertyDescriptionVersion
    itemset Space child element5.6.0

    Design Token

    Space
    Card

    Card content

    Card content

    Card

    Card content

    Card content

    Card

    Card content

    Card content



    center
    Block
    start
    Block
    end
    Block
    baseline
    Block


    Link
    Link
    Link




    Zhejiang

    Zhejianggggg
     


    Option1




    Option1-1
    Option2-2

    Between

    Sign Up
    Email

    Select Address

    leaf1