相邻元素外边距重叠 · 前端

## **垂直外边距的重叠(折叠)** 相邻的垂直方向外边距会发生重叠现象 **兄弟元素** * 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] 一般兄弟元素之间的外边距重合是对开发有利的，可以不用管 **父子元索** 父子元素间相邻外边距,子元素的会传递给父元素(上外边距) 父子外边矩的折叠会影响到页面的布局,必须要进行处理解决办法参考【高度塌陷和外边距重叠最终解决方案】章节