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

来源: http://www.jianshu.com/p/73a5d251065c