2.1.4 边距

在进行组件开发时，边距是最常见的属性之一。边距分为padding内边距和 margin 外边距，每种边距又有上、下、左、右四个方向。我们可以分别设置四个方向的内、外边距，也可以通过padding或margin一起设定。为了介绍边距的概念，这里使用DependentLayout来进行演示，DependentLayout是一种布局，我们会在2.2.2节中介绍。下面来看具体的例子。

1.外边距

在这个例子中，外层布局是 DependentLayout，在内层也放置了一个DependentLayout，内层 DependentLayout 是浅灰色的，通过 ohos：margin 属性设置了外边距为50vp。页面的预览效果如图2-4所示，上、下、左、右的白色区域边距均为50vp。

虽然设置的内层 DependentLayout 的宽度和高度都为 match_parent，也就是宽度和高度都与其父布局一致。但是由于有外边距存在，并没有撑满整个屏幕，剩余的白色区域属于外层DependentLayout。

还可以分别对各个方向设置外边距，代码如下。

上述代码通过ohos：left_margin和ohos：top_margin为组件设置了左侧和上侧外边距，而右侧和下侧没有外边距，页面的预览效果如图2-5所示。设置了外边距的方向并没有撑满屏幕，而没有设置外边距的方向撑满了屏幕。

图2-4 外边距

图2-5 设置左侧和上侧外边距

2.内边距

在上面的内层DependentLayout中添加第三个DependentLayout，它的颜色为深灰色，设置内层DependentLayout的内边距属性。

当为第二层布局设置内边距后，影响的是其内部的内容，而对外部没有影响，页面的预览效果如图2-6所示。内边距指的是组件内部的内容距离组件边界的距离。这里通过ohos：padding属性直接为四个方向设置了内边距，也可以对各个方向分别设置内边距。

页面的预览效果如图2-7所示。通过ohos：left_padding和ohos：top_padding设置了布局的左侧和上侧内边距。剩下两个方向由于没有设置内边距，撑满了该方向上的父布局。

图2-6 内边距

图2-7 设置左侧和上侧内边距