子元素margin影响父元素

bug分析

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

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

什么是边距属性

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

解决方法一

为父级设置overflow或者padding border margin 

解决方法二

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

CSS使用优先级

能用padding 不用margin

猜你喜欢

转载自blog.csdn.net/qq_38603437/article/details/89633766