原本的效果是这样，里面的红色正方形紧贴着外面的蓝色正方形，蓝色正方形紧贴着浏览器的边框

但是给s设置margin-top以后 效果却不只是红色正方形下移，蓝色正方形也下移了

这是因为红色正方形和蓝色正方形的margin-top是紧贴着的，导致了margin-top合并作用在父元素上 互相嵌套的块级元素，子元素的margin-top会作用在父元素上。

解决方法

1.给父元素设置border-top或者padding-top或者给父元素加一些内容，用来分离父子元素的margin-top，这种方法的缺点是会改变网页的布局。

2.给父元素设置overflow:hidden;

3.将父元素或子元素转换成行内块元素，设置display:inline-block;

4.给父元素设置浮动.