「CSS」Margin Collapsing - 外边距合并

cheukyin 发布于2019-08-28 18:17 / 1425人阅读

摘要：外边距合并都是基于以下三种基本的外边距合并。空元素它自己的上外边距和下外边距合并了。阻止外边距合并第二种情况不合并设置不为都可。

外边距合并在排版上带来非常大的便利，但是人们对其不甚了解，导致使用外边距的时候总是出现繁多问题，今日写下一片文章，总结一下外边距合并。

三种基本的外边距合并

只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。外边距合并都是基于以下三种基本的外边距合并。

1. 相邻的同胞元素

我们考虑两个连续的 div，他们的上下左右的边距都是 50px。此时，第一个区域的下外边距 和 第二个区域的上外边距 合并，故他们的间隔是 50px。

2. 父元素与子元素

第一个子元素的上外边距和父元素的上外边距会进行合并

最后一个子元素的下外边距和父元素的下外边距会进行合并

合并的视觉效果就是这些合并的外边距 表现为父元素的外边距。

我们使用一个有颜色区域包含另外一个不同颜色的区域。里面的区域所有的外边距设为50px。

我们可以看到， margin-box 的左边和右边都展示为 #cccdd1, 而由于上边和下边的外边距和父元素的合并了，并表示为父元素的外边距，故颜色为父元素的父元素的背景色（若又发生合并，递推即可）。

细心的读者会发现，我并没有设置父元素的 margin，何来合并一说？
这是因为当 margin 为 0 的时候也会发生合并。

3. 空元素

它自己的上外边距和下外边距合并了。°(°ˊДˋ°) °

阻止外边距合并 第二种情况不合并

设置 overflow: hidden;（不为 visible 都可）。

由于 margin 需要直接接触才能够合并，根据盒子模型，我们可以设置父元素的边框或 内边距，或者使用某些元素将第一个元素和父元素隔开（那就不是第一个元素了）。

三种情况都不合并

只有在静态流的元素才会发生外边距合并，故设置 float, position: absolute; 都可以使得外边距在何种情况都不合并。

inline-block 是个例外，它既没有脱离文档流，但是它的所有的外边距都不会合并。

DEMO

听说技术文章和 DEMO 更配噢～
git clone https://github.com/JasonKid/fezone.git 搜索 Margin Collapsing

记得点赞... (╯‵□′)╯︵ ┴─┴

混合云 idc机房托管外边距重叠 html外边距上下 html外边距颜色 html 边框外边距

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111147.html

详解css外边距折叠（margin collapsing）

摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例： `` `.sli...

孙吉亮 2019-08-23 13:52 评论0 收藏0
详解css外边距折叠（margin collapsing）

摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例： `` `.sli...

J4ck_Chan 2019-06-28 16:52 评论0 收藏0
详解css外边距折叠（margin collapsing）

摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例： `` `.sli...

levy9527 2019-08-29 17:28 评论0 收藏0
详解css外边距折叠（margin collapsing）

摘要：这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。外边距折叠指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距，本文详细的介绍了一下css外边距折叠的实现，分为3种情况，非常具有实用价值，需要的朋友可以参考下前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例： `` `.sli...

Ryan_Li 2019-07-24 16:01 评论0 收藏0
css外边距折叠（margin collapsing）

摘要：前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。这个例子就是外边距折叠块级元素的上外边距和下外边距有时会合并或折叠为一个外边距。前文这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。从一个简单例子说起先看一个简单示例： .slide1 p { margin:10px 0; } 第1种外边距折...

xinhaip 2019-08-29 17:08 评论0 收藏0