CSS中的內(nèi)外間距合并是一個(gè)常見的現(xiàn)象，當(dāng)父級(jí)元素和子級(jí)元素都有設(shè)定內(nèi)外間距時(shí)，會(huì)出現(xiàn)多種情況。

首先，當(dāng)父級(jí)元素和子級(jí)元素的內(nèi)外間距都設(shè)為0時(shí)，它們之間的間距不會(huì)疊加，顯示為0。

.parent {
margin: 0;
padding: 0;
}
.child {
margin: 0;
padding: 0;
}

接著，當(dāng)父級(jí)元素和子級(jí)元素的內(nèi)外間距都設(shè)為非0值時(shí)，它們之間的間距會(huì)疊加，子級(jí)元素的內(nèi)外間距會(huì)加上父級(jí)元素的外間距。

.parent {
margin: 20px;
padding: 10px;
}
.child {
margin: 10px;
padding: 5px;
}

然而，當(dāng)父級(jí)元素的內(nèi)間距不為0，而子級(jí)元素的外間距為負(fù)值時(shí)，它們之間的間距會(huì)取子級(jí)元素的外間距的絕對(duì)值和父級(jí)元素內(nèi)間距的較大值。

.parent {
padding: 10px;
}
.child {
margin-top: -10px;
}

最后，當(dāng)父級(jí)元素的外間距為0，而子級(jí)元素的外間距為非0值時(shí)，它們之間的間距會(huì)取子級(jí)元素的外間距和父級(jí)元素的內(nèi)間距的總和。

.parent {
margin: 0;
padding: 10px;
}
.child {
margin: 20px;
}

總之，了解CSS中內(nèi)外間距合并的規(guī)律，可以更好地控制頁(yè)面的布局效果。