外边距合并出现bug的两种情况

1.相邻块元素垂直外边距的合并

在这里插入图片描述

<style>
        .box {
            width: 100px;
            height: 220px;
            border: 1px solid pink;
        }
        
        .box1 {
            width: 100%;
            height: 100px;
            background-color: purple;
            margin-bottom: 5px;
        }
        
        .box2 {
            width: 100%;
            height: 100px;
            background-color: blue;
            margin-top: 20px;
        }
    style>
head>

<body>
    <div class="box">
        <div class="box1">div>
        <div class="box2">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
24
25
26
27
28
29

当上下相邻的两个块级元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则它们之间的垂直间距不是margin-bottom和margin-top之和。而是取两个值中的较大者。
在这里插入图片描述
解决方案：
尽量只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

在这里插入图片描述

 <style>
        .father {
            width: 200px;
            height: 220px;
            background-color: pink;
            margin-top: 20px;
           
        }
        
        .child {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-bottom: 5px;
            margin-top: 40px;
        }
    style>
head>

<body>
    <div class="father">
        <div class="child">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
24

对于两个嵌套关系（父子关系）的块级元素，父元素有上外边距，同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
（1）可以为父元素定义上边框。
（2）可以为父元素定义上内边距。
（3）可以为父元素添加 overflow:hidden。

  <style>
        .father {
            width: 200px;
            height: 220px;
            background-color: pink;
            margin-top: 20px;
            /* border-top: 1px solid black; */
            /* padding-top: 1px; */
            overflow: hidden;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-bottom: 5px;
            margin-top: 40px;
        }
    style>
head>

<body>
    <div class="father">
        <div class="child">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
24
25
26

在这里插入图片描述

相关阅读:
k8s网络插件之Calico
如何开始使用 Kubernetes RBAC
Java内存模型与线程（2）
阿里巴巴springcloud的gateway网关如何用继承接口WebExceptionHandler定义一个json格式的404错误页面实例
Mybatis要点总结
167. 两数之和 II - 输入有序数组、Leetcode的Python实现
uniapp(uncloud) 使用生态开发接口详情5(云公共模块)
计算机竞赛基于深度学习的视频多目标跟踪实现
OpenHarmony APP开发基础
Day13交换机基本命令、IP包头、路由原理

原文地址：https://blog.csdn.net/m0_55879104/article/details/126474049