margin的传递和折叠

最新推荐文章于 2024-03-26 09:10:16 发布

小林芝คิดถึง

最新推荐文章于 2024-03-26 09:10:16 发布

阅读量708

点赞数 1

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/coderlhj666/article/details/124987826

版权

本文详细探讨了CSS中margin的传递和折叠问题，包括margin在父子元素之间的上下传递，以及垂直方向上的margin折叠规则。通过实例分析了为什么会发生margin传递，并提供了避免margin传递的解决方案。同时，解释了不同情况下margin折叠的情况，如两个相邻块级元素和父子元素间的折叠现象，并给出了防止折叠的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

margin的传递和折叠

一、margin的上下传递(一般发生在父子元素之间)

margin-top传递

如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
为什么会产生传递呢？
原因很简单：w3c的人设计的时候可能考虑到既然父子是近挨着的，子元素没必要设置外边距，给父元素设置更适合
解决方案：
- 1、给父元素设置overflow：auto，触发BFC
- 2、给父元素设置padding-top、padding-bottom
- 3、给父元素设置border

<!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>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;

      overflow: auto;
      /* padding-top: 1px; */
      /* border: 1px solid rgba(0, 0, 0, 0); */
    }

    .content {
      width: 100px;
      height: 100px;
      background-color: blue;

      margin-top: 100px;
    }
  </style>

</head>

<body>

  <div class="box">
    <div class="content"></div>
  </div>

</body>

</html>

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>
    .box {
      width: 300px;
      height: 100px;
      background-color: red;

      /* overflow: auto; */
      /* padding-top: 1px; */
      /* border: 1px solid rgba(0, 0, 0, 0); */
    }

    .content {
      width: 100px;
      height: 100px;
      background-color: blue;

      margin-bottom: 300px;
    }
  </style>

</head>

<body>

  <div class="box">
    <div class="content"></div>
  </div>
  <p>哈哈哈哈哈</p>

</body>

</html>

如果父元素的高度不是auto的话，不会发生传递现象
如果父元素的不设置高度或者高度为auto，就会发生传递
高度不设置默认是auto

<!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>
    .box {
      width: 300px;
      height: auto;
      background-color: red;

      /* overflow: auto; */
      /* padding-top: 1px; */
      /* border: 1px solid rgba(0, 0, 0, 0); */
    }

    .content {
      width: 100px;
      height: 100px;
      background-color: blue;

      margin-bottom: 300px;
    }
  </style>

</head>

<body>

  <div class="box">
    <div class="content"></div>
  </div>
  <p>哈哈哈哈哈</p>

</body>

</html>

二、margin上下折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）

<!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: 300px;
      height: 300px;
      background-color: red;

      margin-bottom: 30px;
    }

    .box2 {
      width: 300px;
      height: 300px;
      background-color: #0f0;

      margin-top: 20px;
    }
  </style>
</head>

<body>

  <div class="box1"></div>
  <div class="box2"></div>

</body>

</html>