<!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>
*{margin: 0;padding: 0;}
.box{border: 1px solid black;width: 300px;height: 300px;
/* perspective: 500px; */
}
.list{width: 200px;height: 50px;background: red;margin: 50px auto;transform: rotateY(-40deg);}
.list div{width: 100%;height: 100%;margin-top: 20px;background: red;}
</style>
</head>
<body>
<button>展开</button>
<div class="box">
<div class="list">
<div>
<div>
<div>
<div>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我给.list div加上margin top时候为什么嵌套的每个div会叠加在一起？如果是因为margin-top的传递问题，那为什么不传递给第一个div距离上边框的距离？意思是list的margin: 50px，那么如果下面的div设置margin-top20px后，list因为margin-top的传递问题距离上边框应该为70px呀，所以它既没有传递又没有把每个div的分开，而是叠加在一起，这是为什么？还有如果给每个div加上文字后就会自动把每个div分开，这又是为什么？
