这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己上级(父元素，祖先元素)。只要给上级设置个有效的 border或者padding就可以有效的防止它越级。
解决办法：给父div设置border-top或者padding-top。
相关文章：