【不一样的CSS】彻底搞懂 margin 重叠问题

最新推荐文章于 2023-09-10 14:12:45 发布

一碗周.

最新推荐文章于 2023-09-10 14:12:45 发布

阅读量205

点赞数 1

分类专栏：不一样的CSS 文章标签： css html html5 javascript css3

本文链接：https://blog.csdn.net/weixin_46163658/article/details/115954652

版权

不一样的CSS 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

彻底搞懂 margin 重叠问题

💪 古之立大事者，不唯有超世之才，亦必有坚忍不拔之志。—— 苏轼

先唠一下

为什么会写这一篇博客呢？因为 margin 这个 CSS 属性的重叠问题，经常在我们的开发过程中会遇到很多问题，严重的时候会导致我们的页面整体布局都会变乱。今天就通过这篇博文，来研究一下 margin 重叠的问题。

外边距重叠问题

外边距重叠只发生在块级元素上，例如 <div> <p> 等，并不会发生在脱离文档流的元素上，例如：设置 float 属性，或者 position 的值为 absolute 时。

发生外边距重叠的情况

相邻兄弟元素的外边距重叠

示例代码如下所示：

<!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>相邻兄弟元素的外边距重叠</title>
    <style>
      .box {
        width: 600px;
        height: 100px;
        line-height: 50px;
        text-align: center;
        color: #333;
      }
      .box1 {
        background-color: #f60;
        margin-bottom: 100px;
      }
      .box2 {
        background-color: #a90;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
  </body>
</html>

如果按照我们正常的思维逻辑的话 box1 和 box2 中间的边距应该是 200px，但事实并不是这样的，如下图

事实上，目前就已经出现了外边距重叠问题。

父级与子级的外边距重叠

示例代码如下所示：

<!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>父级与子级的外边距重叠</title>
    <style>
      .box {
        line-height: 50px;
        text-align: center;
        color: #333;
      }
      .parent {
        width: 600px;
        height: 100px;
        background-color: #f60;
        margin-top: 100px;
      }
      .child {
        width: 600px;
        height: 50px;
        background-color: #a90;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <div class="box parent">
      <div class="box child">child</div>
    </div>
  </body>
</html>

如果仅仅只看我们的代码的话，父级的 margin-top 为 100px ，子级的 margin-top 为 50px，，如果相加的话为 150px，但实际结果如下所示：

父级与子级的外边距重叠问题须没有一下任意一项才能实现

margin-top 重叠

父级元素不是 BFC 元素。
父元素没有 border-top 属性
父元素没有 padding-top 属性
父元素与第一个子元素之间没有行内元素进行分割。

margin-bottom 重叠

父级元素不是 BFC 元素。
父元素没有 border-top 属性
父元素没有 padding-top 属性
父元素与第一个子元素之间没有行内元素进行分割。
父元素没有高度限制

空 block 元素的外边距重叠

示例代码如下所示：

<!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>空 block 元素的外边距重叠</title>
    <style>
      .parent {
        width: 600px;
        height: 10px;
        background-color: #f60;
      }
      .child {
        margin: 50px 0;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child"></div>
    </div>
  </body>
</html>

代码结果如下所示：

子级元素的外边距与 body 的 8px 的 margin 进行了重叠。

空 block 元素外边距重叠触发条件必须满足如下

元素没有 border 属性
元素没有 padding 属性
里面没有 inline 元素
没有设置高度。

外边距重叠计算规则

外边距重叠的计算规则如下：

两个正数的外边距取最大的边距作为外边距。
如果一个为正数，一个为负数，最终的外边距为两者之和。
如果两个值都是负数的话，最终的外边距取绝对值最大的值。

写在最后

既然存在外边距重叠的问题，那么我们在实际开发中就要好好的利用这一特性，例如在写一个列表的时候，尽量不要仅仅只写上外边距或者下外边距，尽量两者都一起写上，避免我们的底部或者头部的布局不是我们想要的效果

一碗周.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【不一样的CSS】彻底搞懂 margin 重叠问题

彻底搞懂 margin 重叠问题???? 古之立大事者，不唯有超世之才，亦必有坚忍不拔之志。—— 苏轼先唠一下为什么会写这一篇博客呢？因为 margin 这个 CSS 属性的重叠问题，经常在我们的开发过程中会遇到很多问题，严重的时候会导致我们的页面整体布局都会变乱。今天就通过这篇博文，来研究一下 margin 重叠的问题。外边距重叠问题外边距重叠只发生在块级元素上，例如 <div> <p> 等，并不会发生在脱离文档流的元素上，例如：设置 float 属性，或者 posi
复制链接

扫一扫