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