互相嵌套块级元素,如果给子元素设置margin-top会作用在父元素身上,这种现象就叫嵌套块级元素塌陷。
解决办法:
1.给父元素设置padding-top或border-top
2.给父元素设置overflow:hidden
3.把子元素转换为行内块:display:inline-block
4.使用浮动 绝对定位 相对定位
* {
margin: 0;
padding: 0;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 1px; */
/* border-top: 1px solid transparent; */
/* overflow: hidden; */
}
.son {
display: inline-block;
/* float: left; */
margin-top: 20px;
width: 200px;
height: 200px;
background-color: purple;
}