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

一,什么是外边距折叠?

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

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

   毗邻

   毗邻说明了他们的位置关系,没有被paddingborderclearline box分隔开。

   两个或多个

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

   垂直方向

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

    普通流(in flow)

   只要不是floatabsolutely positionedroot 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

然而实际情况是:

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

 

 

   这就是外边距折叠

 

二,什么时候会发生外边距折叠?

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

 

    普通流中的块级元素的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元素和其他任何元素之间不发生外边距叠加,也包括它的子元素
上一篇:HTML表格


下一篇:EDM邮件制作