CSS中父子元素间的外边距塌陷(外边距合并)
为什么会外边距合并
子元素的margin-top找不到作为参考边界的父元素的border或者padding,就会与父元素的margin-top重叠。
外边距塌陷被设计出来的初衷
如图,若没有外边距塌陷,那么会出现垂直边距为20px和10px的情况,而存在塌陷后就可以使整个布局更加统一。它被设计出来解决垂直边距问题,这也是为什么只有垂直方向会存在外边距塌陷。
解决方法
根本原因是父元素缺乏了border,所以只要解决这个问题就可以解决外边距塌陷的问题。
1、为父元素添加border或padding
2、为父元素添加overflow: hidden
3、采用相对定位或绝对定位
4、采用float
等等