当父元素有一个子元素时，子元素设置margin-top属性时，没效果，，emmmmm.. （在Firefox上和IE11上试验是这样的）
即：父元素上还有一个和他同级的容器
<body>
<div class="div1"></div>
<div class="div2">
<div class="div21"></div>
</div>
</body>
原因：父子元素的margin合并，使margin属性效果给了父元素
CSS样式：
.div1{
height:100px;
width:100px;
border:1px red solid;
}
.div2{
height: 200px;
width: 200px;
margin:0px 0px 0px 200px;
background-color: #eee;
}
.div21{
height: 50px;
width: 100px;
background-color: aqua;
margin-top:150px;
margin-left: 30px;
}
解决方法：让子元素浮动可以解决，后来想了想发现设置定位也行，父元素为相对定位relative，子元素用绝对定位absolute，不用设置方向距离。
2> margin塌陷：
容器与容器之间的顶部外边距与底部外边距合并成两个外边距值最大的那一个称之为margin塌陷。
示例：
<div class="div4"></div> <div class="div3"></div>CSS样式：
.div4,.div3{
width: 100px;
height: 100px;
border:1px red solid;
}
.div4{
position: relative;
margin-bottom: 20px;
}
.div3{
position: relative;
margin-top:30px;
}
而效果却是这样的：（body背景设的黑色）
如果一个为正值，一个为负值结果不会塌陷；而两个都为负值的时候，又会出现塌陷：
把margin-top改为-20px margin-bottom改为-30px
解决办法：不要两个容器一起用margin(上和下、左和右)属性，这样只会造成塌陷。外边距一个容器去设定。
参考：CSS margin塌陷