同时设置子级盒子和父级盒子的外边距，会导致边距设置失效：
<!DOCTYPE html> <html lang="en"> <!-- 解决方案： 1.可以为父级元素定义边框 2.可以为父级元素定义内边距 3.可以为父级元素添加<overflow:hidden></overflow:hidden> --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型外边距合并--塌陷问题</title> <style> .father { width: 400px; height: 400px; background-color: purple; margin-top: 50px; /* 给父元素添加边框 */ /* border: 10px solid transparant; */ /* padding: 1px; */ overflow: hidden; } .son{ width: 200px; height: 200px; background-color: pink; margin-top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
解决方式：
解决方案：
1.可以为父级元素定义边框
2.可以为父级元素定义内边距
3.可以为父级元素添加overflow: hidden