margin重叠的问题

一、异向重叠

    问题：期待的是两个div中间会有20px,然后只有10px

    解决办法：我觉得最简单的是将上一个div的下边距和下一个div的上边距设置为不同的值，这样浏览器会应用两者间大的值。

#div1 {
    background-color: red;
    margin-bottom: 20px;
}
#div2 {
    background-color: green;
    margin-top: 0;
}

二、同向重叠

    问题：期待小方块与大方块的垂直方向会有10px空隙，但是没有。

解决方法：1.两个div都加浮动。2.给父div垂直方向上加padding或border。

	        #div1 {
			margin: 10px;
			width: 100px;
			height: 100px;
			background-color: red;	
			float: left;	
		}
		#div2 {
			margin: 10px;
			width: 30px;
			height: 30px;
			background-color: green;	
			float: left;	
		}