外边距，margin：

　　　　　　　　垂直外边距的重叠：在网页中相邻的垂直方向的外边距会发生外边距的重叠

　　　　　　　　　　所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和。

　　　　　　　　　　　　.box1{margin-bottom:10px;}

　　　　　　　　　　　　.box2{margin-top:20px;}    // .box1和.box2中间的外边距 取最大值：20px。

　　　　　　　　　　　　<div class='box1'></div>

　　　　　　　　　　　　<div class='box2'></div>

　　　　　　　　　　如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

　　　　　　　　　　　　.box4{margin-top:20px;}    // 这样设置会导致 .box3 的box向下移动20px

 

　　　　　　　　　　　　<div class='box3'>

　　　　　　　　　　　　　　<div class='box4'></div>

　　　　　　　　　　　　</div>

　　　　　　　　　　　　　　解决方法：

　　　　　　　　　　　　　　　　//设置一个元素隔开box3和box4：margin-top:1px   或者   padding-top:1px;

　　　　　　　　　　　　　　　　1.  .box3{border-top:1px;height:79px}  

　　　　　　　　　　　　　　　　　　.box4{margin-top:20px; }  //   margin会依据box3的border向下移动20px

　　　　　　　　　　　　　　　　2.  .box3{padding-top:20px;height:60px;}   //  为了防止box3盒子增高，需要把原来box3盒子的高度减去20px。

 

　　　　　　　　　　　　

　　　　　　　　　　　　　　浏览器为了让用户预览有更好的体验，默认给一些标签加上了 margin 和 padding

　　　　　　　　　　　　　　　　我们可以在编写代码的时候，把这个标签的 margin 和 padding 去除

　　　　　　　　　　　　　　　　* { margin：0；padding：0；}   //  使用通配符去除所有标签相关的内外边距