CSS中margin塌陷案例及解决办法 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style>
.parent {
  background: red;
  width: 300px;
  height: 300px;
  display:flex;
  flex-direction:column;
}

.box1 {
  width: 100px;
  height: 100px;
  background: green;
  margin-bottom:10px;
}

.box2 {
  width: 100px;
  height: 100px;
  background: blue;
  margin-top:10px;
}
</style>
</head>
<body>
  <div class="parent">
      <div class="box1">
        1
      </div>
      <div class="box2">
        2
      </div>
  </div>
</body>
</html>

parent添加display:flex之前
image

添加之后
image

posted @ 2025-04-02 20:59  脆皮鸡  阅读(10)  评论(0)    收藏  举报