子div设置margin-top使父div也跟着向下移动

html：

<div class="main">
  <div class="content"></div>
</div>

css：

body{
  margin:0;
  padding:0;
}
.main{
  width:200px;
  height:200px;
  background:tomato;
}
.content{
  width:100px;
  height:100px;
  background:skyblue;
}

效果：

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。

解决方法：

1. 父div设置padding-top

.main{
  ...
  padding-top:1px;
}

2. 父div设置border-top

.main{
  ...
  border-top:1px solid #fff;
}

3. 父div设置overflow（推荐使用）

.main{
  ...
  overflow:hidden;
}