在html中通过使用css解决外边距重叠（外边距塌陷）问题

目录

                第一步：老规矩先来一个框架

                第二步：这里我们通过使用三个div盒子和一个span来演示（至于为什么请往下看）

               第三步，接下来我们加上css样式，这样可以更加直观的观看

                1.初步样式

                2.解决span问题

                3.开始演示外边距塌陷

        解决方法

               第一种.设置display: inline-block;（这里推荐给子元素设置，给父元素设置对布局影响相对子元素来说大一些）

                第二种：给父元素添加边框

             第三种：给父元素设置给父元素添加padding 

​编辑

                第四种：给父元素加overflow：hidden 

                第五种：给父级或者子级设置position

---

       

首先：我们先来了解一下概念，什么叫外边距重叠？

                1.外边距重叠也可以称之为外边距塌陷，我们在设置外边距时，当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

        接下来我们进行代码演示

                第一步：老规矩先来一个框架

                第三步，接下来我们加上css样式，这样可以更加直观的观看

                        1初步样式

这里大家可以看见我分别设置了三个div盒子和span的宽高，并添加上了背景颜色，但大家可以看见span没有显示（这里先告诉大家原因：是因为span是行内元素，行内元素无法设置宽高，所以这里我们需要在后面代码中添加一个display），下方是效果图

 

               2.解决span问题

 

     细心的小伙伴们可以注意到，这里我给了span一个display: inline-block;，这里至于为什么是display: inline-block;，而不是display: block;，我们后面再解释

                3.开始演示外边距塌陷

                 这里我分别给两个子元素盒子都添加了一个margin-top: 50px;，接下来给大家看看效果图

 

        咦？？我们可以看见第一个盒子并没有出现我们想要的效果，而是和大的div盒子一起下来了，但我们想要的是第二种也就是右方的这种样式，让小盒子和大盒子顶部有空隙

原因：这里出现第一种情况的原因是因为，第一个div盒子是由两个块元素组成，出现外边距塌陷是两个块元素（父子关系哦）才会出现，这里也是我一开始为什么把span转成display: inline-block，而不是display: inline-block;的原因，所以第一种解决方法就出来了

 

 

        解决方法

               第一种.设置display: inline-block;（这里推荐给子元素设置，给父元素设置对布局影响相对子元素来说大一些）

                第二种：给父元素添加边框

             第三种：给父元素设置给父元素添加padding 

                第四种：给父元素加overflow：hidden 

（ 这个方法只适用于 “子元素的高度加上外边距高度小于父元素高度” ，不然子元素部分内容就会被隐藏掉，当初本人在使用这个方法的使用忽略了这点导致子元素被隐藏，傻乎乎的搞了半天）

                第五种：给父级或者子级设置position

          好了，以上就是解决外边距重叠（外边距塌陷）问题的方法，如果还有其他方法，欢迎大家私信或评论告知(如果有错误欢迎大家告知并指出)