内外边距问题(清除、合并、塌陷）

清除内外边距

简写：

*{
			padding: 0;
			margin: 0;
}

比较正式的话如下：

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p {
			padding: 0;
			margin: 0;
		}

注意：行内元素只有左右外边距，没有上下外边距，内边距，在低版本浏览器会有问题
所以尽量不给行内元素指定上下的内外边距就好

外边距合并

外边距合并，垂直的块级盒子以最大的外边距为准
所以尽量避免，只给一个盒子外边距即可

嵌套块元素垂直外边距的合并

以下为外边距塌陷合并问题

	.father {
		width: 300px;
		height: 300px;
		background-color: blue;
		margin-top: 100px			
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: green;
		margin-top: 30px;
	}

解决方案
1.可以为父元素定义1像素的上边框或上内边框
2.可以为父元素添加overflow：hidden
法1

	.father {
		width: 300px;
		height: 300px;
		background-color: blue;
		margin-top: 100px;
		border: 1px solid red;  /* 解决外边距合并（塌陷）问题	*/		
	}

法2

.father {
   	width: 300px;
   	height: 300px;
   	background-color: blue;
   	margin-top: 100px;
   	padding: 1px;    /*解决外边距合并（塌陷）问题*/	
   }

法3

	.father {
   	width: 300px;
   	height: 300px;
   	background-color: blue;
   	margin-top: 100px;
       overflow: hidden;     /* 解决外边距合并（塌陷）问题	*/		
   }