css-外边距折叠(margin collapse)详解

一，什么是外边距折叠？

 在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。

    关键字：毗邻、两个或多个、垂直方向和普通流

   毗邻

   毗邻说明了他们的位置关系，没有被padding、border、clear和line box分隔开。

   两个或多个

   两个或多个盒子是指元素之间的相互影响，单个元素不会存在外边距叠加的情况。

   垂直方向

   只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。

    普通流(in flow)

   只要不是float、absolutely positioned和root element时就是in flow

   例如：

   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">		
.block {
  width: 100px;
  height: 100px;
  background-color: lightBlue;
}
.top {
  margin-bottom: 20px;
}

.bottom {
  margin-top: 30px;
}	
 </style>
</head>
<body>
 <div class="container">
  <div class="block top"></div>
  <div class="block bottom"></div>
</div>

</body>
</html>

　

如果你不了解外边距折叠，那么你会认为：间距 = top块的margin-bottom + bottom块的margin-top ＝20px + 30px = 50px

然而实际情况是:

 

 

   这就是外边距折叠

 

二，什么时候会发生外边距折叠？

         存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。

 

    普通流中的块级元素的margin-bottom永远和它相邻的下一个块级元素的margin-top叠加，除非相邻的兄弟元素clear
    普通流中的块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加
    普通流中的块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加
    如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加


三，外边距折叠后的大小　　

     1.两个相同大小的正数：取某个外边距的值。即30px与30px发生折叠，折叠后的值为30px。
     2.两个不同大小的正数：取较大的外边距的值。即30px与20px发生折叠，折叠后的值为30px。
     3.一正一负：取正数与负数的和。即30px与-20px发生折叠，折叠后的值为10px。
     4.相同大小的负数：同相同大小正数。-30px与-30px折叠，折叠后为-30px。
     5.不同大小负数： 取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。


四，如何避免外边距折叠

  • 浮动元素不会与任何元素发生叠加，也包括它的子元素
  • 创建了BFC的元素不会和它的子元素发生外边距叠加
  • 绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
  • inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
posted @ 2020-09-10 15:27  北巷听雨  阅读(1412)  评论(0)  编辑  收藏  举报
返回顶端