CSS中的margin塌陷（collapse）

对于css中的margin塌陷问题，先看下面代码：

1.并排元素之间的margin问题：

html代码：

<div id="no1"></div>
<div id="no2">Span2</div>

css代码：

*{
  margin:0px;
  padding:0px;
}
#no1{
  background:#808000;
  width:300px;
  height:300px;
  margin-bottom:100px;
}
#no2{
  background:#c0c0c0;
  width:150px;
  height:150px;
  margin-top:60px;
}

不同于其他属性，盒模型中垂直方向上的margin会在相遇是发生崩塌，也就是说当某个元素的底部margin与另一个元素的顶部margin相两者中值较大的会被保留下来。上面例子中只会保留margin-bottom属性，建议还是尽量统一使用同一margin属性。

2.父子级关系中的margin问题：

html代码：

<div id="no1">
	<div id="no2">Span2</div>
</div>

css代码：

*{
  margin:0px;
  padding:0px;
}
#no1{
  background:#808000;
  width:300px;
  height:300px;
  margin-top:100px;
  margin-left: 30px;
}
#no2{
  background:#c0c0c0;
  width:150px;
  height:150px;
  margin-top:60px;
  margin-left: 30px;
}

如果你认为运行结果是这样的话：

那就错了，结果是这样的：

这种情况下也是只会保留数值较大的margin属性，解决的方法是给父级元素加上overflow:hidden属性或者给父级元素加上padding属性，至少添加padding-top属性。