这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战
本篇文章适合前端初学者哦～
在我们日常的开发中，尤其在我们绘页面的时候，总会遇到各种各样的样式问题。今天在这里，小编就给大家说一说，我们经常遇见的一些比较诡异的现象吧
比如，大盒子中嵌套小盒子，如果给小盒子添加margin-top属性，则会出现大盒子和小盒子一起向下移动
再比如，两个同级别垂直排列的盒子，给在上面的盒子设置margin-bottom：50px；给在下面的盒子设置margin-top：50px；可是表现的现象却是 两个盒子相距50px，而不是100px
我想不止是我吧，大家肯定是都遇到过这样的问题，那么到底如何去解决这种场景的，这又是个问题。
下面，就给大家来仔细的讲一讲，如果解决，外边距的合并问题
一、父子级元素
先来写个代码，看下具体体现 html代码如下：
<div class="outer">
<div class="inner"></div>
</div>
css代码如下：
<style type="text/css">
.outer{
width: 400px;
height: 400px;
background-color: teal;
}
.inner{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
</style>
效果如下图所示：
由上图可以看到并没有达到我们想要的效果，此时解决的方法如下：
1、给父级元素添加边框（border）
2、给父级设置over-flow：hidden属性
3、不给子级使用margin属性，给父级添加padding
4、给子级或者父级一方添加浮动
5、给子级或者父级一方添加绝对定位
6、给子级或者父级一方添加属性：display：inline-block;
可以动手去试试看啦，任何一种都可以满足你的需求哦
二、兄弟级元素
1、兄弟元素之间，垂直方向外边距如果都是正数不会叠加，而会发生外边距合并现象，并且外边距最终会取数值较大的。
2、兄弟元素之间，垂直方向外边距如果有一个为负数，会叠加，和普通加减计算一样
3、兄弟元素之间，垂直方向外边距如果都为负数，不会叠加，而会发生外边距合并现象，并且外边距最终会取绝对值较大的。
上面就是本篇文章的所有内容啦，都是平时开发过程中遇到的，但是我想可能去总结的人可能不是很多，所以写了这篇不太有营养的文章分享给大家，溜啦～
小编是前端菜鸟一只，希望可以提出您的宝贵意见哦
