盒子嵌套关系垂直外边距塌陷问题

盒子嵌套关系垂直外边距塌陷问题

盒子嵌套关系垂直外边距塌陷问题

盒子嵌套关系垂直外边距塌陷问题

解决办法:
/* 解决办法 1:为父盒子设置1像素的上边框,颜色一样,但是会撑大父盒子,所以父盒子高度减1*/
.father {
border-top: 1px solid rgb(184, 184, 167);
height: 299px;
}
/* 解决方法 2:为子盒子设置1像素的上内边距,也会撑大子盒子,所以子盒子高度减1 /
.son {
padding-top: 1px;
height: 199px;
}
/
解决方法 3:父盒子设置overflow:hidden ,触发bfc ,不会撑大盒子*/
.father {
overflow: hidden;
}