---
title: Spacing - 间距
order: 5
path: /spacing
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 1
  title: 基础
  path: /basic
---

为设计师设置界面元素中的间距与尺寸提供指导，减少决策成本。同时也方便工程师理解其中的原理。该指南包含了容器间距、横向间距以及纵向间距，适用于元素、组件以及页面布局的设计。

## 间距尺度

间距变量被应用在各个组件内部，或组件与组件之间，用来调整产品整体的密集和紧凑程度。

![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-间距-01.png)

## 间距类型

**容器间距：容器与内容间距**

![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-间距-02.png)

**横向间距：多为行内间距，元素与元素；控件与控件之间的水平方向的间距**

![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-间距-03.png)

**纵向间距：多为内容模块与模块之间的垂直方向的间距**

![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-间距-04.png)

```jsx
/**
 * inline: true
 */
import React from 'react';
const App = () => {
  return (
    <div
      style={{
        marginTop: 32,
        background: '#ECECEC',
        padding: '32px 24px',
        color: 'rgba(13,13,13,0.75)',
      }}
    >
      间距规范在特定场景下并不适用，此时不需要严格按照间距规则来设计，根据实际规则自动生成间距即可。
      <div style={{ marginTop: 24 }}>
        栅格：优先考虑栅格规范，再考虑间距规范。
      </div>
      <div>居中：间距往往由容器实际大小决定，因此不受间距规范限制。</div>
      <div>自适应：可能会按比例缩放间距。</div>
    </div>
  );
};
export default App;
```

### 容器间距

<code src="./demos/marginSpace.tsx" height="600px"/>

### 间距大小

<code src="./demos/basicSpace.tsx"  height="400px"/>

## API

| 参数       | 说明                                   | 类型                                     | 默认值       |
| ---------- | -------------------------------------- | ---------------------------------------- | ------------ |
| align      | 对齐方式                               | `start` \| `end` \|`center` \|`baseline` | -            |
| direction  | 间距方向                               | `vertical` \| `horizontal`               | `horizontal` |
| size       | 间距大小                               | [Size](#Size) \| [Size\[\]](#Size)       | `small`      |
| split      | 设置拆分                               | ReactNode                                | -            |
| wrap       | 是否自动换行，仅在 `horizontal` 时有效 | boolean                                  | false        |
| marginSize | 容器边缘大小                           | `Size` \|`number`                        | NONE         |

### Size

`'small' | 'middle' | 'large' |'NONE' = 0|'XXXXS' = 2|'XXXS' = 4|'XXS' = 6|'XS' = 8|'S' = 12|'M' = 16|'L' = 20|'XL' = 24|'XXL' = 32|'XXXL' = 40| number`