概念
外边距塌陷也称外边距合并,在文档流中相邻(兄弟或父子关系)的块级元素的外边距组合在一起变成单个外边距,只有在上下外边距才会出现塌陷,左右不会出现。
解析:1.两个嵌套块级元素,父元素如果没有上补白和上边框,那么它的上边距会和它的文档流中的的第一个子元素的上边距重叠,取两者较大的值,父元素上的外边距为0,也会发生合并。
(通俗来说:子元素找不到父元素的border或者padding,就会与父元素上边距重叠)
2.两个相邻块级元素,如果上面的元素存在外边距margin-bottom,下面的元素存在外边距margin-top, 那么它们之间外边距不是margin-bottom + margin-top, 而是取两者最大值外边距
外边距计算方式
1.两个值为正数,取较大值
2.两个值为负数,取绝对值较大的值
3.一正一负,取两个值的和
解决方式(父元素)
1.border: 1px solid #fff;
2.float: left;
3.position: absolute;
4.padding: 1px;
5.display: inline-block;
6.overflow: hidden;
7.overflow: auto;