|
问题：
有时当我们设置子元素的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;
}原文链接：https://blog.csdn.net/longgeaisisi/java/article/details/82814914 |
|
回帖推荐 |
|
沙发#
发布于：2020-05-20 14:32
还可以个父级添加 display: flow-root; 属性，也可以实现效果！
其中该属性还对 float 有效果，可以清除浮动，清除 margin值合并的效果 |
|
