CSS外边距塌陷问题

外边距塌陷：

块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。

外边距塌陷有以下三种情况：

• 相邻元素之间
• 父元素与其第一个或者最后一个子元素之间
• 空的块级元素

处理方法：

方法一：为父元素设置边框，并将父元素高度减少

.father {    height: 199px;    width: 200px;    background: gray;    border-top: 1px solid gray;}

方法二：父元素添加内边距，并减少父元素高度

.father {    height: 199px;    padding-top:1px;    width: 200px;    background: gray;}

方法三：父元素添加属性 overflow: hidden

.father {    overflow: hidden;    height: 200px;    width: 200px;    background: gray;}