今天在写一个页面的时候发现一个问题，那时候学习内外边距的时候视频中有讲解到这个外边距合并问题，但我以为是浏览器的一种bug应该不会经常遇到。其实在写嵌套盒子的时候我就遇到了，这个东西应该还是比较重要的，不能忽视。
问题来源：
嵌套盒子，父盒子只提供背景颜色，子盒子更小，想要实现子盒子上边距父盒子有一段距离。
我在写这个的时候直接给子盒子写margin-top77像素。发现子盒子还是贴着父盒子，而外边距部分已经超出父盒子了，所以显示没有效果。
但是试着给父盒子加一个内边距77像素，问题就解决了，达到了撑开父盒子的效果。
想到之前学过的外边距合并问题：
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
嵌套块元素垂直外边距的合并
扫描二维码关注公众号，回复：
2886031 查看本文章
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
其实第二种更加贴切我遇到的情况，嵌套盒子。他的解决方法是：
-
可以为父元素定义1像素的上边框或上内边距。
-
可以为父元素添加overflow:hidden。
我发现这里的解决方法也适用我遇到的情况，如果想要子盒子撑着父盒子有一段距离，父盒子可以加个边框，或者用overflow（加了这句话在浏览器中可以看到也是自动加了1px的边框）。