在俩个盒子嵌套的时候,内部的盒子设置的margin-top会加到外边的盒子上,导致内部的盒子margin-top设置失败,解决方法如下:
1.外部盒子设置一个边框
2.外部盒子设置voerflow:hidden
3.使用伪元素类;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.continer{
width: 400px;
height: 400px;
background-color: red;
/* (1)给父元素添加overflow:hidden */
/* overflow: hidden; */
/* (2)给父元素添加边框属性 */
/* border: 1px solid black; */
}
/* (3)使用伪类元素解决 */
.continer::before{
content: '';
display: table;
}
.inner{
width: 200px;
height: 200px;
background-color: blue;
/* margin-top塌陷问题 */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="continer">
<div class="inner"></div>
</div>
</body>
</html>