详细剖析外边距折叠，轻松摆脱margin带来父子元素和相邻元素外边距塌陷

外边距区域

        由外边距边界限制，用空白区域扩展边框区域，以分开相邻的元素。它的尺寸为 margin-box 宽度和 margin-box 高度；

        外边距区域的大小由margin-top、margin-right，margin-bottom，margin-left，和简写属性margin控制。盒子共享外边距，会发生外边距折叠；

        注意：对于行内元素来说，尽管内容周围存在内边距与边框，但其占用空间（每一行文字的高度）则由line-height属性决定，即使边框和内边距仍会显示在内容周围

外边距折叠

        外边距折叠，其实就是字面意思，可能大家没有接触这个名词，但是大家在码css时一定会遇到过，可能没深入了解，就是外边距和实际预想的不一样，比如相邻元素外边距会相互影响，子元素外边距会导致父元素共享子元素边距等，其实就是外边距折叠；在盒子模型中，有专门的外边距折叠解析；

        注意：外边距折叠只发生在垂直方向，水平方向不发生

三种外边距折叠情况：

1、相邻兄弟元素

         相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。

​ 

上面三个相邻的兄弟元素1、2， 10px和50px，外边距50px；元素2、3，边距10px和50px，外边距50px

外边距都是正值时，折叠后边距取最大值；

​ 

兄弟元素2、3是正负边距，10px 和 -10px，折叠后的外边距是0；

有正负边距，折叠后的外边距的值为最大的正边距与最小（绝对值最大）的负边距的和。

兄弟元素1，2是负边距，-10px和-50px，折叠后的外边距-50px； 

外边距都为负值，折叠后的外边距的值为最小（绝对值最大）的负边距的值。这一规则适用于相邻元素和嵌套元素。

2、没有内容将父元素和后代元素分开

         没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建或间隙来分隔块级元素的上边距（margin-top）与其内一个或多个子代块级元素的上边距（
margin-top）；

        没有设定边框、内边距、行级内容、高度（height）或最小高度（min-height）来分隔块级元素的下边距（margin）与其内部的一个或多个后代后代块元素的下边距（margin-bottom），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。

子元素不是行内（inline）元素；

父元素的上边距100px，为子元素的margin-top;

父元素的下边距50px，为子元素的margin-bottom;

3、空的区块 

如果块级元素没有设定边框、内边距、行级内容、高度（height）、最小高度（min-height）来分隔块级元素的上边距（margin-top）及其下边距（margin-bottom），则会出现其上下外边距的折叠。 

 中间的空区块上下外边距被折叠，所以第三个的外上边距100px

 外边距折叠处理

 如果不希望外边距折叠，有下面这些方案：

1、这几个属性都是不设置，会造成外边距折叠，设置下就不会折叠

.page {
   /* padding: 1px 100px; */
   /* height: 1px; */
   /* min-height: 120px; */
   /* border: 1px #fff solid;
} 

2、有设定浮动和绝对定位的元素不会发生外边距折叠。 

3、display 设置为 flex 或 grid 的容器中不会发生外边距折叠