问题:
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果。
原因:
边距重叠:一个盒子和其子孙的边距重叠。根据规范,一个盒子如果没有上补白和上边框(或者没有设置边框),那么它的上边距应该和其文档流中的第一个孩子元素的上边距重叠。
解决方案:
1.为父元素设置padding。
重叠
.father01{
width:500px;
height:400px;
background-color: aquamarine;
}
.son01{
width:100px;
height:100px;
background-color: blueviolet;
margin-top: 30px;
}
解决后
.father01{
width:500px;
height:400px;
background-color: aquamarine;
padding:1px;
}
.son01{
width:100px;
height:100px;
background-color: blueviolet;
margin-top: 30px;
}
图片效果
2.为父元素设置border。
border: 1px solid #333;
3.为父元素设置 overflow: hidden 。
overflow: hidden;
4、父级或子元素使用浮动或者绝对定位absolute
position:absolute;
或者
float:left;