css外边距塌陷（合并）

[1]相邻块元素垂直外边距的合并
1.当上下相邻的二个块元素相遇时，如果上面的元素有下外边距margin-buttom
2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与mtop之和
3.取二者值中的较大者的这种现象称之为相邻块元素垂直外边距的合并
解决方法：
尽量只给一个盒子加margin
在这里插入图片描述

<style>
        .a1{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin-bottom: 100px;
        }
        .a2{    
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: darkorange;
        }
    </style>
</head>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

运行结果：
在这里插入图片描述
【2】嵌套块元素垂直外边距的合并
1、对于二个嵌套关系的块元素，如果父元素没有上内边距或边框
2、父元素的上外边距会与子元素的上外边距发生合并
3、合并值为二者中的较大者
解决方法：
1、可以给父元素定义上边框border-top
2、可以给父元素定义上内边距padding-top
3、可以给父元素添加overflow：hidden；
4、转为行内块元素
5、设置浮动
其他：浮动、固定、绝对定位的盒子

<style>
        .father{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            margin-top: 100px;
            /* border: 1px solid; */
            /* padding: 1px; */
            overflow: hidden;
        }
        .son{
            margin-top: 150px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
     </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

外边距塌陷的运行结果：
不管是子盒子还是父盒子都会被往下顶；
子盒子设置了margin-top=100px，会把父盒子往下顶100px，即：坑爹行为
如果父亲设置了margin-top=200px，则父盒子会往下移动200px
在这里插入图片描述

消除塌陷后运行结果：
在这里插入图片描述

相关阅读:
maven聚合工程的创建
6-前端笔记-CSS-复合选择器
【论文阅读】（2016）Learning to Branch in Mixed Integer Programming
JavaScript 中的变量声明与赋值
深入理解左倾红黑树 | 京东物流技术团队
Mysql的视图、存储过程与函数
PON网络应用场景
Mac M1运行、连接 Docker MongoDB7。导出、恢复数据库
交流回馈老化测试负载的应用
JVM系列之GC

原文地址：https://blog.csdn.net/lxllxl211/article/details/127415076