设计目标

为了让各种元素在界面上的布局呈现出一定的韵律感和统一性，需要对不同类型的间距做出归纳和定义。

最小尺度

除了基础组件的内部间距，其他所有间距的最小单位值都为4px，即所有间距的值都是4px的整数倍。

页面边距Margin

页面边距指的是在整个Shell的框架中，内容区离顶部和左侧导航的距离。在CoreDesign中，密集型业务域的产品，页面边距为16px（如财鲸、零售云）；而常规型业务（如政务、星环）则采用20px。

密集型：
image.png

常规型：
image.png

水槽Gutter

水槽指的是内容区中卡片与卡片之间的距离，一般为12px。
image.png

卡片内间距Padding

卡片内间距指的是卡片里的内容区和卡片容器之间的距离，一般为20px。
image.png

标题&正文间距Headline&ContentSpace

标题和正文间距指的是卡片容器的一级或二级标题和正文内容之间的距离。当仅有一级标题时，一级标题和下方正文区域的间距为16px；当既有一级标题，又有二级标题时，一级标题和二级标题的间距为16px，二级标题和正文区域的间距为12px。需要注意的是，若某个一级/二级标题对应的正文区域下方还有另一个一级/二级标题，那么该间距应该是40px。

仅有一级标题：
image.png

一级标题+二级标题：
image.png