CSS中，元素的垂直外邊距在一定條件下有可能會出現塌陷的情況。這個現象被稱為“垂直外邊距塌陷”。

具體來說，當兩個相鄰元素的垂直外邊距重疊時，會出現塌陷，即兩個元素的外邊距值取其中較大的一個。這種情況通常出現在嵌套關系緊密的元素之間。

.example {
margin-top: 20px;
}
.example p {
margin-top: 30px;
}

以上代碼中，如果在.example元素中包含一個段落元素p，那么p元素的上方外邊距會和例行元素example的上方外邊距合并，結果會被渲染成一個30px的外邊距，而不是期望的50px。

為了避免垂直外邊距塌陷，我們可以使用以下方法：

• 使用父元素的內邊距來代替父元素的外邊距；
• 為父元素設置border或outline屬性；
• 為父元素或子元素設置display屬性為inline-block或floated。

通過以上方法，我們可以有效地避免垂直外邊距塌陷的問題。