margin的传递和折叠

最新推荐文章于 2023-11-26 17:10:16 发布

小林芝คิดถึง

最新推荐文章于 2023-11-26 17:10:16 发布

阅读量571

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/coderlhj666/article/details/124987826

版权

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>

水平方向上的margin（margin-left、margin-right）永远不会collapse
折算后的规则：
- 两个值进行比较，选取最大的值
如何防止折叠呢
- 只设置一个的margin

三、上下margin折叠情况

两个兄弟块级元素之间上下margin的折叠
父子块级元素之间margin的折叠

小林芝คิดถึง

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
margin的传递和折叠

margin的传递和折叠一、margin的上下传递(一般发生在父子元素之间)margin-top传递如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素为什么会产生传递呢？原因很简单：w3c的人设计的时候可能考虑到既然父子是近挨着的，子元素没必要设置外边距，给父元素设置更适合解决方案：1、给父元素设置overflow：auto，触发BFC2、给父元素设置padding-top、padding-bottom3、给父元素设
复制链接

扫一扫