3.margin重叠问题

猿人li

于 2023-02-13 20:00:31 发布

阅读量157

点赞数 1

文章标签： html5 前端 html css Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_72711523/article/details/129015650

版权

文章详细解释了在CSS布局中，子元素的margin-top会导致父元素一起偏移，以及在并列元素间margin不叠加的现象。这两个问题都与BFC（块格式化上下文）有关。通过触发BFC，例如设置overflow:hidden，可以解决margin重叠的问题，确保元素间间距按预期显示。

摘要由CSDN通过智能技术生成

margin-top传递现象 (包含结构): 在一个包含结构中,子元素设置了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>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top: 50px;
    }
    .big{
      width: 300px;
      height: 300px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="box1"></div>
  </div>
</body>
</html>

发生原因: BFC规则:box垂直方向的距离由margin决定,属于同一个BFC(都在html这个BFC)下的两个相邻box的margin会发生重叠,所以子元素设置了margin-top父元素也会往下走

解决办法:让他们属于不同的BFC,给父元素big添加overflow:hidden触发BFC.

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-top: 50px;
    }
    .big{
      width: 300px;
      height: 300px;
      background-color: green;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="box1"></div>
  </div>
</body>
</html>

2.并列结构中的现象:在一个并列结构中,一个元素设置了marigin-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>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 50px;
    }
    .box2{
      width: 300px;
      height: 300px;
      background-color: green;
      margin-top: 150px;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

发生原因: BFC规则:box垂直方向的距离由margin决定,属于同一个BFC(都在html这个BFC)下的两个相邻box的margin会发生重叠,所以中间的间距只会取一个值

解决办法: 给其中任意一个box加一个父元素并设置overflow:hidden; 触发BFC即可

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: red;
      margin-bottom: 50px;
    }
    .box2{
      width: 300px;
      height: 300px;
      background-color: green;
      margin-top: 150px;
    }
    .father{
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="box1"></div>
    <div class="father">
    <div class="box2"></div>
    </div>
</body>
</html>