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. memory barrier 内存屏障 编译器导致的乱序

    小结: 1. 很多时候,编译器和 CPU 引起内存乱序访问不会带来什么问题,但一些特殊情况下,程序逻辑的正确性依赖于内存访问顺序,这时候内存乱序访问会带来逻辑上的错误, 2. https://gith ...

  2. LOJ10102旅游航道

    题目描述 SGOI 旅游局在 SG-III 星团开设了旅游业务,每天有数以万计的地球人来这里观光,包括联合国秘书长,各国总统和 SGOI 总局局长等.旅游线路四通八达,每天都有众多的载客太空飞船在星团 ...

  3. loj10173

    炮兵阵地 司令部的将军们打算在 N×M 的网格地图上部署他们的炮兵部队.一个 N×M的地图由 N 行 M 列组成,地图的每一格可能是山地(用 H 表示),也可能是平原(用 P表示),如下图.在每一格平 ...

  4. Node.js 安全指南

    当项目周期快结束时,开发人员会越来越关注应用的"安全性"问题.一个安全的应用程序并不是一种奢侈,而是必要的.你应该在开发的每个阶段都考虑应用程序的安全性,例如系统架构.设计.编码, ...

  5. SpringMVC听课笔记（SpringMVC 表单标签 & 处理静态资源）

    1.springmvc表单标签,可以快速开发,表单回显,但是感触不深 2.静态资源的获取,主要是要配置这个

  6. Language Guide (proto3) | proto3 语言指南（十四）选项

    Options - 选项 .proto文件中的单个声明可以使用许多 选项 进行注释.选项不会更改声明的总体含义,但可能会影响在特定上下文中处理声明的方式.可用选项的完整列表在google/protob ...

  7. 删除Kafka中的topic

    删除Kafka中的topic 一.配置delete.topic.enable=true 二.其他方法 一.配置delete.topic.enable=true 修改kafaka配置文件server.p ...

  8. linux 高可用----keepalived+lvs

    什么是高可用? HA(high availability)即高可用性:就是在高可用集群中发生单点故障时,能够自动转移资源并切换服务,以保证服务一直在线的机制. LVS LVS:(linux virtu ...

  9. 【有趣的全彩LED | 编程】用STM32 HAL库让WS2812B为你所动

    一.效果展示 观看演示效果:https://www.bilibili.com/video/BV1dv411Y7x3 使用STM32 HAL库编程 PWM+DMA控制输出,CubeMX生成初始工程 实现 ...

  10. EXCEL序列