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;
}