相鄰元素外邊距重疊 · 前端

## **垂直外邊距的重疊(折疊)** 相鄰的垂直方向外邊距會發生重疊現象 **兄弟元素** * 1、兄弟元索間的相鄰垂直外邊距會取兩者之間的較大值(兩者都是正值) ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; margin-bottom: 20px; } .box2{ width: 200px; height: 200px; background-color: #fba; margin-top:100px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> ``` ![](https://img.kancloud.cn/29/67/29675b1360f72fbaff05d0e1207c665a_989x401.png) * 2、兄弟元索間的相鄰垂直外邊距的值為一正一負則取兩者的和（極不推薦這樣做） ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; margin-bottom: -100px; } .box2{ width: 200px; height: 200px; background-color: #fba; margin-top:200px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> ``` ![](https://img.kancloud.cn/29/67/29675b1360f72fbaff05d0e1207c665a_989x401.png) * 3、兄弟元索間的相鄰垂直外邊距的值為都為負則取兩者絕對值的最大值（不推薦這樣做） ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>site title</title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; margin-bottom: -100px; } .box2{ width: 200px; height: 200px; background-color: #fba; margin-top:-200px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> ``` ![](https://img.kancloud.cn/6c/8f/6c8fe2b88f1d0d02167148479409b0e2_336x255.png) >[danger] 一般兄弟元素之間的外邊距重合是對開發有利的，可以不用管 **父子元索** 父子元素間相鄰外邊距,子元素的會傳遞給父元素(上外邊距) 父子外邊矩的折疊會影響到頁面的布局,必須要進行處理解決辦法參考【高度塌陷和外邊距重疊最終解決方案】章節