collapse

1. border-collapse  

• 该CSS属性用来设定表格的行和列的边框是合并成单边框，还是分别有各自的边框
• separate 缺省值。边框分开，不合并。
• collapse 边框合并。即如果相邻，则共用同一个边框。

2. margin collapse

• margin collapse，即边界塌陷或者说边界重叠。对于上下两个并列的div块而言，上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值，所以从这个意义上说：CSS及浏览器的设计者们希望我们在布局时，如果遇到上下两个并排内容块的安排，最好只设置其中每个块上或下margin的一处即可。

• 对于父块DIV内含子块DIV的情况，对于有块级子元素的元素计算高度的方式,如果元素没有垂直边框和填充,那其高度就是其子元素顶部和底部边框边缘之间的距离。

eg：

#fatherDiv{

  background:#808000;

  width:300px;

  height:300px;

  margin:100px 0 0 100px;

}

#childDiv{

  background:#c0c0c0;

  width:150px;

  height:150px;

  margin-left:20px;

  margin-top:30px;   //此处虽然设定了margin-top但是子div还是和父div的顶部重合

}

 

3.解决方法

1、给父DIV设置边框，当然可以设置边框为透明;

 　　border:1px solid transparent或 border-top:1px solid transparent

2、为父DIV添加padding，或者至少添加padding-top;