利用margin、padding和border三個屬性（它們都是組合屬性），可以有以下幾種方式為盒模型設置上下左右的距離和寬度。

4.2.1使用單獨屬性

1．margin-top,margin-right,margin-bottom,margin-left

2．padding-top,padding-right,padding-bottom,padding-left

3．border-top,border-right,border-bottom,border-left

?  注意：

關于border邊框，如果只設置其寬度，是不會有任何效果的，還需要為其設置邊框的類型和顏色。如果在對同一個元素進行css屬性設置時，按照css的屬性順序，后一個屬性的值將覆蓋前一個屬性的值。同樣，針對相同屬性，style屬性設置的樣式將覆蓋在頁面head頭部設置的值。

需要注意的是，body標簽本身也是一個盒子，它是瀏覽器中最頂層的大盒子，所以所有盒子模型相關的屬性也同樣適用于body標簽。但由于body是最頂層的，它并沒有同級的盒子，更不會有父容器，所以body標簽的margin屬性與padding屬性類似，都只是針對body的內容進行間距的設置，通過簡單案例4-1,example01.html來體驗,效果如圖4-2所示。

例4-1   example01.htm

圖4-2 body的margin屬性設置

上述代碼為一個div盒子設置了寬度，高度以及背景色,上外邊距，左外邊距。一般情況下盒子與瀏覽器窗口之間默認是有一定距離的。大約為10個像素，為了頁面布局，可能需要取消這10個像素，按正常情況下是設置body的margin屬性為0即可。

4.2.2使用組合屬性

1．margin

可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。

margin：10px,20px,15px,25px; 對應的順序為（上右下左）上邊距，右邊距，下邊距，左邊距，即順時針方向，如果記不住這個組合屬性的順序，也可以使用單獨屬性。

2．padding

定義元素邊框與元素內容之間的空間，即上下左右的內邊距。

padding：10px,20px,15px,25px;對應的順序為上間距，右間距，下間距，左間距

3．margin：0px auto：表示上下邊距為0px，左右邊距為自動，即水平居中，其他兩個屬性一樣。

圖4-3 盒子模型的margin，padding單個屬性設置

4．margin：100px；即上下左右的邊距均為100px。其他兩個屬性設置方式一樣。

margin屬性值可以有一到四個值。其基本語法格式如下：