css 子级元素设置margin-top父级元素会跟着移动最主要的的原因是边距重叠
边距重叠:一个父级盒子和其子级盒子的边距重叠。根据规范,一个盒子如果没有上边补白和上边框,那么它的上边距应该和其文档流中的第一个子级元素的上边距重叠
解决方案:
1.为父级元素设置padding
#father {
width: 200px;
height: 200px;
padding: 1px;
}
.son {
width: 100px;
height: 100px;
margin-top: 10px;
}
2.为父级元素设置border
#father {
width: 200px;
height: 200px;
border: 1px solid black;
}
.son {
width: 100px;
height: 100px;
margin-top: 10px;
}
3.为父元素设置 overflow: hidden
#father {
width: 200px;
height: 200px;
overflow: hidden;
}
.son {
width: 100px;
height: 100px;
margin-top: 10px;
}
4.对父级或子级元素使用浮动(这里展示给子级元素设置浮动)
#father { width: 200px; height: 200px; background-color: aqua; } .son { width: 100px; height: 100px; margin-top: 10px; float: left; }
5.对父级或子级元素设置绝对定位(这里展示给子级元素设置绝对定位)
#father {
width: 200px;
height: 200px;
}
.son {
width: 100px;
height: 100px;
margin-top: 10px;
position:absolute;
}