css中，会出现盒子margin的合并问题，主要分为兄弟盒子合并和父子盒子合并，因为css的特点就是不练就忘，所以我写一篇博客来巩固自己的记忆

兄弟盒子合并

先来看一段代码

        .div1 {
            border: 1px solid red;
            margin-bottom: 100px;
        }

        .div2 {
            margin-top: 100px;
            border: 1px solid black;
        }

给div1跟div2分别设置了margin属性后，实际上没有出现100px+100px=200px的效果兄弟盒子margin合并

可以得出当两个盒子分别设置了上下marin时，会出现合并的问题，css应当是希望我们给其中一个设置就好，也有可能是bug，具体未知。

解决方法

1、给其中一个盒子转换属性 inline-block，如果说转换属性后盒子的宽度发生变化，毕竟原本的block占一行，设置了inline-block后就默认内容宽高，可以设置width：100%。（一般情况下的width默认是auto）

2、一般情况下只要规范一下代码就好了~只给一个设置

父子盒子合并

当两个嵌套关系的块元素，子盒子想设置上下margin的时候，父盒子的margin可能和子盒子的margin发生合并，合并后取中间比较大的margin

解决方法

给父盒子设置overflow:hidden
给父盒子设置border:1px solid transparent
给父盒子设置padding 内边距挡住
给父盒子添加浮动、absolute、fixed、display:flex等

css margin合并问题

兄弟盒子合并

解决方法

父子盒子合并

解决方法