Python:margin collapse

时间:2022-02-19 01:37:10

margin collapse:边界 折叠/重叠/坍塌

此种现象只会垂直方向并且要满足一定条件时才会出现这种现象。

https://tech.youzan.com/css-margin-collapse/

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

我们可以注意定义中的几个关键字:毗邻两个或多个垂直方向普通流

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

从定义中我们可以很清楚的知道要符合哪些情况才会发生外边距折叠:

  • 都属于普通流的块级盒子且参与到相同的块级格式上下文中
  • 没有被paddingborderclearline box分隔开
  • 都属于垂直毗邻盒子边缘:
    • 盒子的top margin和它第一个普通流子元素的top margin
    • 盒子的bottom margin和它下一个普通流兄弟的top margin
    • 盒子的bottom margin和它父元素的bottom margin
    • 盒子的top marginbottom margin,且没有创建一个新的块级格式上下文,且有被计算为0的min-height,被计算为0或autoheight,且没有普通流子元素

形成 BFC 的条件(符合以下任一条件即可): 
1) float 的值不为 none;
2) overflow 的值不为 visible;
3) display 的值为 table-cell、table-caption 和 inline-block 之一;
4) position 的值不为 static 或 relative 中的任何一个;
3. BFC 常见作用

https://blog.csdn.net/qq_33435265/article/details/54705946