由於偶然翻到了以前的筆記，記載的正好是css的margin塌陷現象。於是有了寫在知乎上與大家分享討論的想法。
在標準文件流中，豎直方向（記住是豎直方向，左右方向的不會出現塌陷現象）的margin會出現疊加現象，即較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有乙個較大的margin，這就是margin的塌陷現象。
margin的塌陷現象分兩種情況：1，兄弟關係的盒子 2 ，父子關係的盒子
1，兄弟關係的盒子margin塌陷的解決方法：
給上面的盒子加個margin-bottom（這個距離等於兩個盒子之間的距離）或者給下面的盒子加個margin-top（這個距離等於兩個盒子之間的距離）。
2 ，父子關係的盒子margin塌陷的解決方法：
給父盒子加上下邊框或者給父盒子新增上下padding。
關於margin的塌陷問題
1 兄弟關係的外間距塌陷 元素並列，垂直方向相鄰的margin相遇會出現疊加 兩值不同時取較大的值 原因 上下兩兄弟關係的盒子共用乙個外間距 解決 1 為兩盒子分別套乙個父級盒子，並在父級盒子新增overflow hidden 2 將兩兄弟分別觸發bfc 2 並列關係的外間距塌陷 元素巢狀 子元素的...
CSS中的BFC 與 margin塌陷
一 css中的bfc bfc 直譯為 塊級格式化上下文 他是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不相干。bfc布局規則 1.內部的box會在垂直方向，乙個接乙個地放置。2.bfc的區域不會與float ...
margin塌陷 margin合併的解決
父子巢狀元素垂直方向的 margin，父子元素是結合在一起的，他們兩個會取其中最大的值 正常情況應該是父級相對於瀏覽器進行定位，子級應該相對於父級定位的 但是 margin 塌陷是在父級相對於瀏覽器進行定位時，子級沒有相對於父級定位，就像父級的棚子沒有了一樣子級相對於父級，就像塌陷了一樣 a.給父元...