这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。
再说了白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了，为父元素例子中的middle元素增加一个padding-top或者最上方的子元素使用padding代替margin即可解决这个问题。
