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.內邊距

在上面的內層DependentLayout中添加第三個DependentLayout，它的顏色為深灰色，設置內層DependentLayout的內邊距屬性。

當為第二層布局設置內邊距后，影響的是其內部的內容，而對外部沒有影響，頁面的預覽效果如圖2-6所示。內邊距指的是組件內部的內容距離組件邊界的距離。這里通過ohos：padding屬性直接為四個方向設置了內邊距，也可以對各個方向分別設置內邊距。

頁面的預覽效果如圖2-7所示。通過ohos：left_padding和ohos：top_padding設置了布局的左側和上側內邊距。剩下兩個方向由于沒有設置內邊距，撐滿了該方向上的父布局。