margin重叠（折叠）

同一级的普通流中的2个或多个块级元素之间，垂直方向上，相连2个块元素的margin会重叠。margin都为正值时最终显示的margin值为它们中较大的那个，
注意点:
1-->margin不同情况，取值不同：
都为正值时，margin取他们之间最大的那一个
其中一个为负值时，margin取他们的和，例如:相连两个块级元素,垂直方向上,上面元素的margin-bottom为-50px,下面元素的margin-top为20px,那他们之间的margin为(-50px+20px=-30px)
2.-->同一级,发生margin重叠的块级元素需要是同一级,不能是嵌套或者其他非同一级关系。
3.-->普通流,如果定位除(非静止定位)布局、浮动布局、弹性布局等经过布局的块级元素，他们之间不会发生margin重叠。

解决margin重叠

相连两个块元素，只设置其中一个的margin；
为他们的父元素设置overflow:hidden或者float属性；
将他们的父元素设为BFC（块级格式化上下文）；
在有margin重叠的元素内部添加一个border或padding；
设置一个负的margin值来抵消掉正的margin值；
使用CSS3新增的属性，如box-shadow或transform；
使用定位；
将元素设置为inline-block或inline元素。垂直方向margin重叠的基础代码

* {
        margin: 0;
      }
      p {
        width: 200px;
        height: 220px;
      }
      #A {
        margin: 20px 0;
        background-color: blue;
      }
      #B {
        margin: 30px 0;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
        <p id="A">A</p>
        <p id="B">B</p>
  </body>

如图1: 垂直方向上的2个块级元素,他们之间的margin发生了重叠,都是正值,取其中最大的那一个; 解决给其中一个元素设置为行内块, 如图2:

 * {
        margin: 0;
      }
      p {
        width: 200px;
        height: 220px;
      }
    #A {
        margin-bottom: 100px;
        background-color: blue;
      }
      #B {
        /* 自身的高度 */
        margin-top: -200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
        <p id="A">A</p>
        <p id="B">B</p>
  </body>
</html>

如图3 两个margin里面有负值,取二者的和(100px-200px=-100px)
解决:给margin为负值的元素设置为行内块 display: inline-block,抵消负值, 如图4:

margin塌陷

存在父子关系的两个块级元素,给子元素设置垂直方向上的margin外边距,会作用在父级元素上,自身不生效,

解决margin塌陷

1. 给父元素添加上边框 border-top: 1px solid transparent;
1. 给父元素添加上内边距 padding-top: 1px;
1. 为父或子元素转换为行内块 display: inline-block;
1. 给overflow: hidden属性--> 原意: 溢出隐藏==>触发BFC
  代码如下,

/* 外边距塌陷,给子级添加外边距,会作用在父级身上,自己不生效 */
body {
      widows: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .brackgroud-black {
      width: 500px;
      height: 500px;
      background-color: black;
    }
      .father {
        width: 400px;
        height: 400px;
        background-color: green;
      }

      .son {
        width: 200px;
        height: 200px;
        background-color: blue;
      } margin-left: 10px;
}

<!-- 给他们设置一个黑色的背景颜色.brackgroud,方便看清father和son的变化 -->
 <div class="brackgroud-black">
        <div class="father">
            <div class="son"></div>
          </div>
    </div>

如图5: 给son添加一个margin-top

 .son {
 /* 给son添加垂直方向的外边距 */
        margin-top:50px;
        
        width: 200px;
        height: 200px;
        background-color: blue;
      }

如图6: 给son添加的margin-top会作用在father上
解决:给父级设置一个上外边框,

.father {
        width: 400px;
        height: 400px;
        background-color: skyblue;

        /* border-top: 1px solid transparent;  */
        /* 为了看清,给一个红色的边框 */
        border-top: 3px solid red;
      }

如图5:

margin重叠（折叠）和高度塌陷

margin重叠（折叠）

解决margin重叠

margin塌陷

解决margin塌陷