【前端基础】margin塌陷如何解决

最新推荐文章于 2024-07-31 14:35:30 发布

这是一只程序媛

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量391

点赞数

分类专栏：前端基础文章标签：前端 css html

本文链接：https://blog.csdn.net/qq_46028187/article/details/123696790

版权

前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

导致边距塌陷的两种情况:

1. 同级元素塌陷

两个同级元素，垂直排列。上面的盒子给了margin-bottom，下面的盒子给了margin-top。那么这两个边距将会重叠，按照大的值来计算。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
      margin-bottom: 20px;
    }
    .box2 {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

效果图：

此时两个盒子，box1设置了20px的下边距，box2设置了30px的上边距，但是最终两个盒子之间的边距为30px。

解决办法：不让这两个边距同时出现。

2. 父子元素塌陷

两个父子元素，内部的子盒子给了margin-top，父元素也会受到影响，同时产生上边距，也就是父子粘连。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son"></div>
  </div>

</body>

</html>

效果图：