子元素margin影响父元素

bug分析

浏览器内核在渲染margin时会在捕获到子元素并对子元素的模型渲染完毕之后，开始向父级寻找父级的边界

父元素的边界由父元素的边界属性决定，如果父级没有边界，父级就会受到子元素的margin影响，导致父级产生同样的margin

什么是边距属性

盒子模型的border padding margin overflow 为盒子模型的边距属性

解决方法一

为父级设置overflow或者padding border margin 

解决方法二

用子级的padding实现相同的视觉效果，取消margin 

CSS使用优先级

能用padding 不用margin