CSS邊距塌陷：為什么我的margin-top移動了父元素？

代碼結構（簡化）：

立即學習“前端免費學習筆記（深入）”；

html:

CSS: #one { margin-top: 20px; } (此處省略其他樣式)

分析： 這就是CSS邊距塌陷。當父元素高度為auto，子元素為塊級元素，且父元素無padding和border時，父元素的高度會受到子元素margin-top的影響。 元素的高度是自動計算的，而“one”是塊級元素，它的margin-top與的頂部邊距發生合并，導致的高度增加，從而整體向下移動。

解決方法： 有多種方法可以避免邊距塌陷：

1. 設置父元素高度： 為元素指定一個明確的高度值，例如height: 100px;。
2. 添加邊框或內邊距： 為父元素添加border或padding，例如border: 1px solid #ccc; 或 padding: 10px;。
3. 使用內邊距代替外邊距： 將margin-top替換為padding-top。
4. 使用浮動或絕對定位： 為子元素“one”設置Float: left; 或 position: absolute;。

通過理解邊距塌陷的機制，我們可以更好地控制CSS布局，避免類似問題的發生。