解决嵌套盒子外边距塌陷的问题
嵌套关系的两个盒子,如果给子盒子加一个外边距,会导致外边距塌陷
列子:
.box1 {
height: 500px;
width: 500px;
background-color: slateblue;
}
.box2 {
height: 200px;
width: 200px;
background-color: yellowgreen;
margin-top: 100px;
}
塌陷指的是父盒子也会跟着子盒子一起下移的现象
解决塌陷的方法:
/* 解决塌陷的方法 /
/ 1.给父盒子加上边框(会撑大盒子) /
/ border-top: 1px solid transparent; /
/ 2.给父盒子加内边距(会撑大盒子) /
/ padding-top: 1px; /
/ 3.给父盒子加 overflow: hidden;(不会撑大盒子) /
/ 溢出隐藏 /
/ overflow: hidden; */