---
category: 布局
order: 2
title: 边距间距
---

## 边距

边距是指页面内容区的内容与容器边框之间的安全距离，即容器的内边距，有上、下、左、右四个方向，所有边距采用以4px为单位的增量计算形式。如：4、8、12、16、20、24...页面边距设定应是有规律，有层次的，容易记忆和复制的。边距值不易过小，过小会失去边距存在的意义，使容器过满，使用户产生窒息感，不利于信息的阅读；同样也不易过大，过大会占用过多页面空间，还会使容器失去跟内容的联系，常用边距有12，16，20，24。

边距制定规则：

- **单个容器**：单个容器边距四个值尽量保持一致，左右边距必要性统一，上下边距可选性统一。 

![2](../pic/边距间距/2.png)

- **多个容器**：当一个页面中存在多个容器时，对容器边距的设定要是有规律的，有层次的，同级容器边距须保持一致。

![Group 12](../pic/边距间距/Group12.png)

- **多个页面**：一个平台存在很多页面，这些页面中的容器边距需要保持统一、遵循一定的规律设定，可以按照页面布局、页面层级等一些可控的属性进行设置。

实例：

下图为一个采用瀑布式布局的页面：

![Group](../pic/边距间距/Group.png)

下图为一个采用纸片式布局的页面，为了要使“返回”按钮处在一个相对舒适的位置，内容区容器上边距由24缩减到20px：

![Group 5](../pic/边距间距/Group5.png)

下图为一个采用纸片式布局的页面，跟上面页面不同的是它纸片顶部有tab，纸片内有两块容器：

![Group 9](../pic/边距间距/Group9.png)

下图为一个采用卡片式布局的概览页面，一个大的容器内存在四个平级的小容器：

![Group 8](../pic/边距间距/Group8.png)

页面的浮动层和模态窗口层，容器面积相对较小采用小一号的边距：20px，如下：

![Group 10](../pic/边距间距/Group10.png)

![Group 11](../pic/边距间距/Group11.png)

## 间距

间距是指页面中相邻两项之间的安全距离，适当的间距可以给页面增加透气感，增加页面阅读的舒适度，除此之外，间距也是用来划分信息层次的一种方式。间距设定同样采用以4px为单位的增量计算形式，如：4、8、12、16、20、24、...

### 边距制定规则

边距制定遵循以下三个规则：

- **有层次**：间距层次，最小颗粒度的信息采用小间距，由小颗粒度信息组合而成的粗颗粒度的信息组采用大一级的间距，以此类推，可以让用户对页面结构和信息层次一目了然。。


- **有规律**：间距的制定依据元素之间的关联度，关联性越高，间距越小，也越像一个视觉单元；反之，则它们的间距越大，也越像多个视觉单元。


- **容易记忆和复用**：页面间距数值不已过多，按照信息层次划分大、中、小三种为宜，如：16，24，32，太少不容易区分信息层级，太多容易混乱，不容易记忆和复用。

### 间距分类

间距主要分为垂直间距和水平间距。

- 垂直间距：常用垂直边距有：16，24，32三种形式。

实例：  

![Group 13](../pic/边距间距/Group13.png)

![Group 2](../pic/边距间距/Group2.png)

![Group 3](../pic/边距间距/Group3.png)

![Group 4](../pic/边距间距/Group4.png)

- 水平间距：常用垂直边距有：12，20，24三种形式。

实例：

![Group 14](../pic/边距间距/Group14.png)

![Group 6](../pic/边距间距/Group6.png)