CSS margin collapsing All In One

CSS margin collapsing All In One

margin collapsing

margin 塌陷 / margin 合并

会出现 margin collapsing 的 3 种情况

️ 只有 margin-top 之间, margin-bottom 之间，margin-top 和 margin-bottom 之间才会出现 margin 合并！

️ 在 margin-left 与 margin-bottom 不存在 margin 合并！

1. 相邻兄弟元素

2. 没有内容隔开的父子元素

3. 空的块级元素

demos

See the Pen css margin collapsing （1. 相邻兄弟元素） by xgqfrms
(@xgqfrms) on CodePen.

See the Pen css margin collapsing （2. 没有内容隔开的父子元素） by xgqfrms
(@xgqfrms) on CodePen.

See the Pen css margin collapsing （3. 空的块级元素） by xgqfrms
(@xgqfrms) on CodePen.

margin 合并后, margin 大小的计算方法

++, max +

--, min -

+-, sum

1. 同为正数，取大的正值(正)

Math.max(10px, 20px) = 20px

1. 同为负数，取小的负值(负)

Math.min(-10px, -20px) = -20px

1. 一正一负，取求和后的值(可正可负)

10px + -20px = -10px

BFC

BFC 触发条件

https://www.cnblogs.com/xgqfrms/p/12764046.html

demos

See the Pen css margin collapsing all in one by xgqfrms
(@xgqfrms) on CodePen.

refs

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

504 Gateway Timeout

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/504

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---