1.相邻块元素垂直外边距合并
body部分:
style样式:
第一个盒子设置底部外边距100px
第二个盒子设置顶部外边距200px
按理说:两个盒子的距离应该是300px
但由于<相邻块元素垂直外边距合并>问题
此时边距不会叠加为300px,盒子和盒子的距离是200px
页面效果:
解决方案
尽量只给一个盒子加margin
2.嵌套块元素垂直外边距塌陷
body部分:
style样式:
页面效果:
由于<嵌套块元素垂直外边距塌陷>问题
孩子和父亲会一起塌陷
解决方案
1.为父元素定义上边框
为了不影响盒子美观,可以将边框颜色设置为透明色
2.为父元素定义上内边框
3.为父元素添加overflow:hidden
这个方法最简单
最后效果: