13.margin垂直外边距的重叠,导致子父元素移动问题

margin垂直外边距的重叠问题
在网页中相邻的垂直方向的外边距会发生外边距的重叠
所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
如果父子元素的垂直外边距相邻了,则子元素的外边距会设置给父元素

初始未设置margin-top 垂直外边距:



    
        
        
        
    
    
        
预览效果图
image.png

因为子元素和父元素重叠,这个时候我给子元素设置margin-top 就会导致父元素也会跟着移动,导致bug出现



    
        
        
        
    
    
        

效果预览:


image.png

解决方案就是不要让子元素与父元素重叠

通过设置padding-top 让子元素与父元素不在重叠解决该bug



    
        
        
        
    
    
        
预览效果:
image.png

你可能感兴趣的:(13.margin垂直外边距的重叠,导致子父元素移动问题)