很多时候在设置样式时发现当子元素设置了上外边距后连父元素也跟着向下偏移了,例如下面
<style>
.box1{
background-color: rgb(226, 250, 215);
width: 300px;
height: 300px;
}
.box2{
background-color: brown;
width: 200px;
height: 200px;
margin-top: 50px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
很明显父元素也看上去有了一个50px的上外边距,这里提供两种解决方法
1.给父元素设置边框
2.父元素加上overflow:hidden即可