CSS margin 重叠(margin collapse)

青旅半醒 2024-05-24 04:32 170阅读 0赞

### `margin 重叠(margin collapse)` ###

首先有两个地方是我自己以前也没有注意的

*  非替换元素的内联元素(`<span>`, `<code>`等), 设置上下 `margin` 没有用. 但是设置左右 `margin` 是有效果的. 而替换元素(`<img> 等`), 设置上下左右四个 `margin` 都有效果
    
     *  ![在这里插入图片描述][54fd42cfe8fb4121b4e479d84fa1fc38.png_pic_center]
 *  其次就是只有上下 `margin` 会发生重叠(这个说法不严谨, 后面会解释).

进入正题, 上下 `margin` 重叠时, 谁的值(绝对值)更大最终的 `margin` 大小就是谁的值. 如果上下 `margin` 大小相同也是这样.

#### `margin 重叠的三种情况` ####

##### `相邻的兄弟节点` #####

.box {
        
      border: 1px solid;
    }

最终合并的 `margin` 大小为 `2rem`  
![在这里插入图片描述][0fbf3f5f24f542d59371a2a34a809b8a.png_pic_center]

如果想阻止这种情况 `margin` 合并很简单, 就是破坏`相邻`这个条件, 因为两个都是块元素, 给他们中间增加 `<br/>` 换行就可以啦?

![在这里插入图片描述][3719489a18434eedbfd09e1d5ee63a98.png_pic_center]

##### `没有内容将父子分开` #####

?如果没有 `border`, `padding`, 行内元素, 格式化上下文(`BFC(Block Formatting Context)`) 或者清除浮动将一个父元素的上 `margin` 与其子元素的上 `margin` 分开; 重叠的部分溢出父元素.

父子元素除了 `margin` 外都没有设置任何属性. 但是父元素离页面顶部的高度是 `2rem`, 因为出现了 `margin` 重叠.  
![在这里插入图片描述][f88067d540e6476481c9396457e95223.png_pic_center]

?父子元素出现 `margin` 重叠的第二种情况是没有 `border`, `padding`, 行内元素, `height` 或者 `min-height` 将一个父元素的下 `margin` 与其子元素的下 `margin` 分开, 那么 `margin` 就会重叠. 重叠的部分溢出父元素.  
![在这里插入图片描述][2dbb5c9d305b4b31b5d364dd081b0e36.png_pic_center]

我知道此刻你的心里在想什么?你在想如果第一种情况和第二种情况同时发生会怎么样呢? 必须满足.

从下面的内容看, 前两个块元素满足兄弟节点 `margin` 重叠, 后两个块元素之间满足父子节点 `margin` 重叠, 且两种情况的重叠部分又重叠, 最终的重叠大小为 `3rem`, 大者获胜?  
![在这里插入图片描述][50096b0769b44ea2abcfb236b12c4b2f.png_pic_center]

?关于这种情况, 在开发时需要注意, 如果我们设置子元素 `margin` 是为了和父元素保持一定距离就可能出现 `margin` 重叠, 所以这时候改用设置父元素 `padding` 来达到相同的效果.

##### `空的块级元素` #####

如果一个空元素没有设置 `border`, `padding`, 行内元素, `height`, `min-height` 来将上下 `margin` 分开, 那么上下 `margin` 也将重叠.

来看上面的空元素, 即便同时设置了上下 `margin`, 但最终的 `margin` 高度还是 `32px(2rem)`.  
![在这里插入图片描述][146c8ad490194964bbb96034a2a88d0f.png_pic_center]

但是如果稍微加点内容(行内元素)就不一样了  
![在这里插入图片描述][fb768d16a42746dd9e7d564e91d53a62.png_pic_center]

### 其他复杂的规则 ###

其实 [CSS-TRICKS: The Rules of Margin Collapse][CSS-TRICKS_ The Rules of Margin Collapse] 这篇文章里介绍了一些开发人员认为 `margin` 重叠的复杂难懂. 特别是不同情况重合在一起时, 但是还是有一些情况更加常见需要注意.

#### 第一, 即便某个 `margin` 的值为 `0`, 上述规则仍然使用 ####

#### 负值 `margin` ####

如果参与重叠的 `margin` 中包含负值, 那么重叠之后的值为最大的正 `margin` 与最小(最负)的负 `margin` 的和.

<div style="margin-bottom: 5rem;">456</div>
    <div style="margin-top: 1rem; background-color: salmon;">
      <div style="margin-top: -2rem;">123123123123123123123123</div>
    </div>
    可以看到, 最后的重叠 `margin` 为 `3rem(=5rem-2rem)`

![在这里插入图片描述][898d9217864d4630a8bc7700d3be7847.png_pic_center]

那如果有两个负值 `margin` 又怎么样呢, 同样的重叠之后的 `margin` 为 `1rem(=5rem-4rem)`  
![在这里插入图片描述][368f99e34a5d4366ae91609792a99fb4.png_pic_center]

让我们考虑最最最最后一种情况, 三个 `margin` 全为负. 全是负的话依然是绝对值最大的负值为最后合并后的值.

在三个 `margin` 中, 绝对值最大的 `margin` 为 `-3rem`, 那么合并后的 `margin` 值为 `-3rem`  
![在这里插入图片描述][ac82f58cbb71475fbef6fd12445fcc6b.png_pic_center]

#### `float` 和 `absolute` 定位的元素 `margin` 永不重叠 ####

第一个 `div` 不浮动, 第二个浮动, 两者不发生 `margin` 重叠  
![在这里插入图片描述][3fe108d0901648a5bbb1976e1852b853.png_pic_center]

<div>我是凑热闹的~~~~</div>
    <div style="position: relative; margin-top: 1rem; background-color: pink;">
      <div style="position: absolute; margin-top: 3rem; background-color: skyblue;">123</div>
    </div>

相对定位的 `div` 和决定定位的 `div` 满足父子组件 `margin` 重叠的条件但是并没有重叠.  
![在这里插入图片描述][c17529a988d746c89c8a88c95c6a1bb7.png_pic_center]

#### `flex` 子项元素没有 `margin` 重叠 ####

在这个 `flex` 布局中, 主轴的方向是从上到下, 相邻元素之间符合 `margin` 重叠的第一种情况, 但是并没有发生重叠.  
![在这里插入图片描述][3902bd3221fc4c8597ab2b2ae6224248.png_pic_center]

#### `不是上下, 而是块元素堆叠方向` ####

一般大家都会说是上下 `margin` 才会重叠, 这个说法不错, 因为大多数情况文档流是从上到下, 块元素也是从上到下排列的. 但是如果我们修改书写顺序, 比如古代文字是从右到左书写的, 那么这时候视觉上发生 `margin` 重叠的不是上下, 而是左右.

?所以严谨的说法是, 发生 `margin` 重叠的方向是块元素排列方向. 如果从上到下写字, 就是视觉上下 `margin` 重叠; 如果从左到右写字, 就是视觉左右 `margin` 重叠.

在代码中我们使用 `margin-block-start` 和 `margin-block-end` 这两个 `CSS` 属性来表示块排列开始方向和结束方向的 `margin`  
![在这里插入图片描述][9c373d8fc65d4cc38ff94b0c260cdabd.png_pic_center]

谢谢你看到这里, 本文仅作了有限的讨论和探索, 不足之处请指出

[54fd42cfe8fb4121b4e479d84fa1fc38.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/174dc80c294b4b9bb397baa2e17f349b.png
[0fbf3f5f24f542d59371a2a34a809b8a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/87a09deda6c942a190c94c42b0eb580b.png
[3719489a18434eedbfd09e1d5ee63a98.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/be58ec8c9d4a495d9ad6a56f5737767f.png
[f88067d540e6476481c9396457e95223.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a6e86c77c8004536b3216b86b4526568.png
[2dbb5c9d305b4b31b5d364dd081b0e36.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/162bfc41167f4f4487cefd365c6668ad.png
[50096b0769b44ea2abcfb236b12c4b2f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/d4a926809d2c4f6ba418f5cd70895243.png
[146c8ad490194964bbb96034a2a88d0f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a0ce88c88dd84a47810f9385e1602659.png
[fb768d16a42746dd9e7d564e91d53a62.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/99092b9f06d14d3b83cfb39fc1357196.png
[CSS-TRICKS_ The Rules of Margin Collapse]: https://css-tricks.com/the-rules-of-margin-collapse/
[898d9217864d4630a8bc7700d3be7847.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/5db397acd60f42809ad3e8668a5287b3.png
[368f99e34a5d4366ae91609792a99fb4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/ed44bc316fa943fab7129a75acfecb39.png
[ac82f58cbb71475fbef6fd12445fcc6b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/2f8bb37ce5824fc6bd0d0452382f1079.png
[3fe108d0901648a5bbb1976e1852b853.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/8bdc3f939d7a4e5bba08c4c95d83d641.png
[c17529a988d746c89c8a88c95c6a1bb7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/b21ba94d6fe44f8fb9cf77cbbf951034.png
[3902bd3221fc4c8597ab2b2ae6224248.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/660f78e5677e460faca9f746d689339a.png
[9c373d8fc65d4cc38ff94b0c260cdabd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/1301596a0dbf458680bb03598071e2d3.png