HTML day06

01 盒模型

margin 设置外边距

margin-top：设置元素上边的外边距
margin-right：设置元素右边的外边距
margin-bottom：设置元素下边的外边距
margin-left：设置元素左边的外边距

合写：
	margin：上 右 下 左；
	
	上= 下  右！=左
	margin：上 右 下 左；
	
	上！=下  右= 左
	margin：上 右 下；
	
	上= 下=右=左
	margin：上；

margin的经典bug

1.上下两个兄弟元素的margin重叠问题
  上下两个兄弟的标签，设置margin的时候，它们之间的距离不是相加，而是谁设置的margin值大，就显示谁的距离，即为值大的覆盖小的可以理解为，上面元素的margin-bottom和下面的元素margin-top它们的值取最大的一个
  
  结决办法：给下面的元素添加 display：inline-block

2.父子级子元素的margin-top传递问题
  在子元素中设置margin-top，表现的结果是该margin-top传递到了父级元素上，使得父元素距离它上面的元素为该margin-top值
 
  解决办法：a.给父元素添加 overflow：hidden；
  			b.给父元素添加 border