CSS盒外邊距

在CSS樣式中，盒子模型是一個(gè)很重要的概念。CSS盒外邊距指的是盒子模型中的外邊框與周圍元素之間的距離。

HTML頁面中的每個(gè)元素都有一個(gè)盒子模型，包括四個(gè)部分：內(nèi)容區(qū)域、內(nèi)邊距、邊框和外邊距。CSS盒外邊距可以用于控制元素與其他元素之間的距離。

/* 設(shè)置元素的外邊距 */
margin-top: 10px; /* 上外邊距 */
margin-right: 20px; /* 右外邊距 */
margin-bottom: 30px; /* 下外邊距 */
margin-left: 40px; /* 左外邊距 */
/* 同時(shí)設(shè)置四個(gè)外邊距 */
margin: 10px 20px 30px 40px;

一個(gè)元素的外邊距可以為正數(shù)、負(fù)數(shù)或零。正數(shù)表示元素與其他元素之間的距離增大，負(fù)數(shù)表示元素與其他元素之間的距離減小，零表示元素與其他元素之間的距離不變。

當(dāng)兩個(gè)元素的外邊距重疊時(shí)，會(huì)出現(xiàn)一種“合并”現(xiàn)象，即兩個(gè)相鄰元素之間的空白間隔將等于它們兩者間最大的外邊距值。這種現(xiàn)象通常出現(xiàn)在兩個(gè)垂直排列的元素之間。

/* 垂直排列的兩個(gè)元素 */
.box1 {
margin-bottom: 20px;
}
.box2 {
margin-top: 30px;
}
/* 外邊距重疊 */
.box1, .box2 {
background-color: #ccc;
height: 50px;
}

上面這個(gè)例子中，box1和box2之間的距離并不是20px和30px之和的50px，而是它們兩者之間最大的外邊距值30px。這種現(xiàn)象在設(shè)計(jì)頁面時(shí)需要特別注意。

總之，CSS盒外邊距是控制HTML頁面中元素與周圍元素之間距離的重要屬性，它可以通過設(shè)置為正數(shù)、負(fù)數(shù)或零來控制元素之間的間隔，但需要特別注意外邊距重疊的問題。