为什么第一个子元素设置margin-top父元素会跟着移动（附解决方案）

逃离我推掉我的手 2022-05-09 22:00 75阅读 0赞

**问题：**  
有时当我们设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。  
**原因：**  
边距重叠：一个盒子和其子孙的边距重叠。根据规范，一个盒子如果没有上补白和上边框，那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。  
**解决方案**  
1、为父元素设置padding。

#father {
        width: 300px;
        height: 300px;
        background: orange;
        padding: 1px;
    }
    #son {
        width: 100px;
        height: 100px;
        margin: 50px;
        background: red;
    }

2、为父元素设置border。

#father {
    	    width: 300px;
    	    height: 300px;
    	    background: orange;
    	    border: 1px solid #000;
    	}
    	#son {
    	    width: 100px;
    	    height: 100px;
    	    margin: 50px;
    	    background: red;
    	}

3、为父元素设置 overflow: hidden 。

#father {
        width: 300px;
        height: 300px;
        background: orange;
        overflow: hidden;
    }
    #son {
        width: 100px;
        height: 100px;
        margin: 50px;
        background: red;
    }

4、父级或子元素使用浮动或者绝对定位absolute

#father {
        width: 300px;
        height: 300px;
        background: orange;
        position:absolute;
    }
    #son {
        width: 100px;
        height: 100px;
        margin: 50px;
        background: red;
    }