CSS外边距的塌陷解决办法

一、外边距的塌陷解决办法

注意：塌陷

两个嵌套的元素，第一个子元素的margin-top 会和父元素的margin-top（父元素没有设置上边框和 内间距）

1、 给父元素设置上边框 或者设置内间距 （不推荐）

2、 给父元素 添加 overflow:hidden;

#fater{
	width:400px;
	height:399px;
	background-color:#000;
	padding-top:1px;
	/*没有padding-top的话下面的margin-top不会生效*/
	/*
	解决方法1
	 padding-top:1px 换成 border-top:1px solid #000  颜色和背景颜色一样 方块height-1 
	
	解决方法2
	直接在fater里面使用padding-top属性
	
	解决方法3
	给父div增加overflow:hidden
	直接解决问题
	*/
}
#son{
	width:200px;
	height:200px;
	background-color:#0f0;
	margin-top:50px;
}

<div id="fater">
        <div id="son"></div>
</div>

外边距的合并解决方法

div {
	width: 200px;
	height: 200px;
	background-color: aquamarine;
}

#div1 {
	margin-bottom: 100px;

/*
	100px无效
	取下面最大的margin200px
*/

}

#div2 {
	margin-top: 200px;
}

/*
	解决方法1：
	两个盒子的外边距真实距离，是两个margin中最大的那个
	不要给两个盒子同时设置margin
	把两个的值设置到一个盒子上面
	
	解决方法2：
	给元素添加一个父元素  并设置 overflow:hidden;
*/

 <div id="div1"></div>
 <div id="div2"></div>