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 发布文章使用：只允许注册用户才可以访问！

CSS margin collapsing All In One的更多相关文章

  1. 小记css的margin collapsing

    近期在做web页面设计的时候,莫名的发现最上面会出现一个横条,颜色为html的背景颜色.本意是那一片空横条应该为header的背景色.查了一些资料,发现是margin collapsing的问题,记录 ...

  2. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  3. 外边距塌陷 margin collapsing

    块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距, 这种行为称为外边距塌陷(margin collapsing),有的地方翻译为外边距合并. 1.相邻的兄弟姐妹 ...

  4. 细说 CSS margin

    作者:https://coding.net/u/zhengkenghong原文:https://blog.coding.net/blog/css-margin 细说 CSS margin 本文着重描述 ...

  5. CSS Margin(外边距)

    CSS Margin(外边距)属性定义元素周围的空间. Margin margin清除周围的元素(外边框)的区域.margin没有背景颜色,是完全透明的 margin可以单独改变元素的上,下,左,右边 ...

  6. CSS margin属性取值

    margin表示一个元素的外边距.取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近 但是,设置margin后,四个方向的表现形式不同 自身发生移动:top.left margin-t ...

  7. CSS——margin

    CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽 ...

  8. CSS Margin（外边距）

    CSS Margin(外边距) 一.简介 CSS margin(外边距)属性定义元素周围的空间. margin 清除周围的(外边框)元素区域.margin 没有背景颜色,是完全透明的. margin ...

  9. CSS：CSS margin(外边距)

    ylbtech-CSS:CSS margin(外边距) 1.返回顶部 1. CSS margin(外边距) CSS margin(外边距)属性定义元素周围的空间. margin margin 清除周围 ...

随机推荐

  1. 为什么 Go 模块在下游服务抖动恢复后，CPU 占用无法恢复

    为什么 Go 模块在下游服务抖动恢复后,CPU 占用无法恢复 https://xargin.com/cpu-idle-cannot-recover-after-peak-load/ 极端情况下收缩 G ...

  2. Simple decorator that intercepts connection errors and ignores these if settings specify this.

    django-redis/cache.py at master · jazzband/django-redis https://github.com/jazzband/django-redis/blo ...

  3. 重绘和回流（Repaint & Reflow）总结，以及如何进行优化

    1. 浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout) 浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tre ...

  4. Phoenix表和索引分区优化方法

    Phoenix表和索引分区,基本优化方法 优化方法 1. SALT_BUCKETS RowKey SALT_BUCKETS 分区 2. Pre-split RowKey分区 3. 分列族 4. 使用压 ...

  5. Linux-处理用户输入

    Linux-处理用户输入 1.命令行参数 1.2读取参数 1.3 读取脚本名 1.4测试参数 2.特殊参数变量 2.1 参数统计 2.2抓取所有的数据 3.移动变量 4.处理选项 5.选项标准化 6. ...

  6. Java服务端性能优化

    <Java程序性能优化>说性能优化包含五个层次:设计调优.代码调优.JVM调优.数据库调优.操作系统调优. 常用的几个代码优化方案: 使用单例 对于IO处理.数据库连接.配置文件解析加载等 ...

  7. 全局负载均衡与CDN内容分发

    CDN简介 CDN的全称是Content Delivery Network,即内容分发网络.CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发. ...

  8. ness使用-漏扫

    1.登录nessus后,会自动弹出目标输入弹框: 输入目标IP,可通过CIDR表示法(192.168.0.0/80),范围(192.168.0.1-192.168.0.255),或逗号分隔(192.1 ...

  9. 深度学习论文翻译解析（十九）：Searching for MobileNetV3

    论文标题:Searching for MobileNetV3 论文作者:Andrew Howard, Mark Sandler, Grace Chu, Liang-Chieh Chen, Bo Che ...

  10. Qt项目的发布

    Qt项目的发布 (1)首先将项目调为发布版 (2)找到缺失的DLL文件 发布好了后,双击生成的exe文件可能会出现如下的问题 像这样的错误警告可能会弹出好几个,对于这种错误有2种解决方案. 第一种:配 ...