为什么这样写还是会有塌陷

<!DOCTYPE html>
<html lang="zh">
   <head>
      <meta charset="UTF-8">
      <title>标题</title>
      <style>
         * {
            margin: 0;
            padding: 0;
         }
         
         .a {
            background-color: orange;
            height: 200px;
            margin-bottom: 40px;
            width: 200px;
         }
         
         .b {
            background-color: orange;
            height: 200px;
            margin-top: 40px;
            width: 200px;
         }
         
         div {
            overflow: hidden;
         }
      </style>
   </head>
   <body>
      <div>
         <p class="a"></p>
         <p class="b"></p>
      </div>
   </body>
</html>

DanielDu87 2021-11-13

源自：浮动与定位 2-3 BFC规范和浏览器差异

收起

1回答

好帮手慕然然 2021-11-14 10:19:23

同学你好，视频中解决margin塌陷是要使用两个div分别把p标签包裹起来，然后给div设置overflow: hidden就可以解决塌陷问题，而同学的代码则是用一个div把两个p标签包裹到一起了，所以p标签之间还是存在margin塌陷问题，正确代码如下：

祝学习愉快！

收起回答

deepdark_fantasy #1

为什么一定要分别包裹才有效果呀？

2022-02-25 10:23:13
好帮手慕星星回复 deepdark_fantasy #2

同学你好，分别用盒子包裹是为了分开，相互不受影响。否则两个p挨着，上下间隙是重合状态。记住这种使用方式即可。

2022-02-25 10:28:01