CSS：相邻块元素垂直外边距合并、嵌套块元素外边距塌陷

听海边涛声

已于 2024-06-27 15:47:33 修改

阅读量327

点赞数 4

文章标签： css 前端 javascript

于 2024-06-27 15:44:29 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139967209

版权

相邻块元素垂直外边距的合并

说明

使用margin定义块元素的上下外边距时，可能会出现垂直外边距的合并。
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素设置了下外边距margin-bottom，下面的元素设置了上外边距margin-top，则它们之间的垂直距离并不是上边元素的margin-bottom和下边元素的margin-top之和，而是取两个值中较大的那个，这种现象称为块元素垂直外边距的合并。

解决建议：尽量只给一个盒子添加margin值。

示例

下面示例中，两个盒子，上面盒子设置margin-bottom为20像素，下面盒子设置margin-top为50像素，这两个盒子之间的margin最终为50像素：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1 {
      width: 300px;
      height: 200px;
      background-color: pink;
      margin-bottom: 20px;
    }

    .box2 {
      width: 300px;
      height: 200px;
      background-color: purple;
      margin-top: 50px;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

嵌套块元素垂直外边距的塌陷

说明

对于两个有嵌套关系（父子关系）的块元素，父元素有上外边距（margin-top）同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以给父元素定义上边框
可以给父元素定义上内边距
可以给父元素添加overflow: hidden;
其它方法：例如浮动、固定、绝对定位的盒子不会有塌陷问题。

示例

内部盒子的margin-top的值大于外部盒子的margin-top的值

下面示例中，两个盒子嵌套，大盒子的margin-top设置为50像素，内部小盒子设置的margin-top设置为100像素，最终显示的效果大盒子的margin-top为100像素：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: purple;
      margin-top: 50px;
    }

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

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

</html>

在这里插入图片描述

给父元素定义上边框

下面示例中，设置父盒子的margin-top为100像素，设置了父盒子的边框，子盒子的margin-top为50像素，现在子盒子和父盒子可以隔开了：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: purple;
      margin-top: 100px;
      border: 1px solid transparent;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 50px;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

给父元素指定上内边距

下面示例中，通过给父元素设置上内边距，父元素和子元素设置的margin-top就可以生效了：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: purple;
      margin-top: 100px;
      /* border: 1px solid transparent; */
      padding: 1px;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 50px;
    }
  </style>
</head>

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

</html>

在这里插入图片描述

给父元素添加overflow: hidden;

下面示例中，通过给父元素添加overflow: hidden;，父元素和子元素中设置的margin-top就可以生效了：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      width: 400px;
      height: 400px;
      background-color: purple;
      margin-top: 100px;
      /* border: 1px solid transparent; */
      /* padding: 1px; */
      overflow: hidden;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 50px;
    }
  </style>
</head>

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

</html>