如何設置盒子模型的外邊距？

網(wǎng)頁是由多個盒子排列而成的，要想拉開盒子與盒子之間的距離，合理地布局網(wǎng)頁，就需要為盒子設置外邊距。所謂外邊距指的是標簽邊框與相鄰標簽之間的距離。在CSS中margin屬性用于設置外邊距，它是一個復合屬性，與內(nèi)邊距padding的用法類似，設置外邊距的方法如下。

margin-top:上外邊距;
margin-right:右外邊距;
margin-bottom:下外邊距;
margin-left:左外邊距;
margin:上外邊距 [右外邊距 下外邊距 左外邊距];

margin取值遵循值復制的原則，其取1~4個值的情況與padding相同，但是外邊距可以使用負值，使相鄰標簽發(fā)生重疊。

當對塊級元素（將在5.4小節(jié)詳細介紹）應用寬度屬性width，并將左右的外邊距都設置為auto，可使塊級元素水平居中，實際工作中常用這種方式進行網(wǎng)頁布局，示例代碼如下。

.num{ margin:0 auto;}

注意：

如果沒有明確定義標簽的寬高時，內(nèi)邊距相比外邊距的容錯率高。




猜你喜歡：

【前端】盒子模型的邊框樣式屬性和應用技巧講解

JavaScript中如何獲取標簽屬性？

CSS3盒子模型邊框怎樣實現(xiàn)圓角效果？

黑馬程序員web前端培訓班