前端开发中的外边距合并问题

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

body部分：

style样式：

第一个盒子设置底部外边距100px

第二个盒子设置顶部外边距200px

按理说：两个盒子的距离应该是300px

但由于<相邻块元素垂直外边距合并>问题

此时边距不会叠加为300px，盒子和盒子的距离是200px

页面效果：

解决方案

尽量只给一个盒子加margin

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

body部分：

style样式：

页面效果：

由于<嵌套块元素垂直外边距塌陷>问题

孩子和父亲会一起塌陷

解决方案

1.为父元素定义上边框

为了不影响盒子美观，可以将边框颜色设置为透明色

2.为父元素定义上内边框

3.为父元素添加overflow:hidden

                            这个方法最简单

最后效果：