这是CSS规范定义的margin垂直合并行为：相邻、嵌套或空块级元素的上下外边距会取最大值而非相加，如20px与30px合并为30px；典型场景包括兄弟元素相邻、父子塌陷及空元素自身合并。

为什么两个 div 的上下 margin 没加起来，反而“消失”了一截？

因为这不是 bug，是 CSS 规范明确规定的 margin 垂直合并行为：当两个普通流中的块级元素在垂直方向上“碰头”（相邻、嵌套或为空），它们的 margin-top 和 margin-bottom 会合并成一个值，而不是相加。浏览器按规则取最大值、相加负值或选更“狠”的负值——你写的 margin-bottom: 20px 和 margin-top: 30px，最终只生效 30px。

哪些场景一定会触发 margin 合并？

三种典型结构，几乎覆盖所有“间距变小”“

• 相邻兄弟元素：如 .item1 { margin-bottom: 20px; } + .item2 { margin-top: 15px; } → 实际间距 = 20px
• 父子穿透（俗称“margin 塌陷”）：父元素没 border、没 padding、没内容、也没触发 BFC，子元素设 margin-top: 40px → 父容器整体下移 40px，像它自己有了外边距
• 空块级元素自身合并：一个空 → 上下外边距直接叠成 30px 高，不是 60px

怎么快速验证是不是 margin 合并搞的鬼？

打开浏览器开发者工具（F12），选中出问题的元素，在右侧 Computed 面板里看 margin-top 和 margin-bottom 的实际计算值；再对比 Styles 面板里你写的样式是否被划掉或显示为灰色。如果发现：“我写了 20 + 15，但 computed 只显示 20”，基本就是合并了。

最稳妥、兼容性好、不改结构的解决法

别碰 float 或 position: absolute —— 它们虽能阻止合并，但会让元素脱离文档流，引发新问题。推荐这些：

立即学习“前端免费学习笔记（深入）”；

• 给父容器加 display: flow-root：现代写法，语义清晰，零副作用，Chrome 64+/Firefox 58+ 全支持
• 统一用 margin-bottom 控制兄弟间距：所有元素只设下方距，彻底避开 margin-top 参与合并
• 加透明边框：border-top: 1px solid transparent 或 padding-top: 1px —— 物理隔断合并条件，老项目秒修
• 改用 Flex/Grid：display: flex; flex-direction: column; 或 display: grid;，子元素自动免疫 margin 合并

容易忽略的一点：行内元素、浮动元素、绝对定位元素从不参与 margin 合并——但这不等于“用了就能解决问题”，而是意味着它们已脱离常规布局流，得额外处理对齐、高度、包裹等一堆副作用。

# css  # 浏览器  # 工具  # 绝对定位  # 为什么  # firefox  # chrome  # Float  # 堆  # 外边距  # display  # position  # margin  # padding  # border  # column  # flex  # bug  # 你写  # 这是  # 就能  # 也没  # 用了  # 这不是  # 会让  # 三种  # 写了  # 解决问题 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： LinuxShell函数封装方法_脚本复用设计思路【教程】  5种Android数据存储方式汇总  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  详解Huffman编码算法之Java实现  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  如何在建站宝盒中设置产品搜索功能？  html如何与html链接_实现多个HTML页面互相链接【互相】  专业商城网站制作公司有哪些,pi商城官网是哪个？  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  JavaScript中的标签模板是什么_它如何扩展字符串功能  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  如何登录建站主机？访问步骤全解析  Android中Textview和图片同行显示(文字超出用省略号，图片自动靠右边)  黑客如何通过漏洞一步步攻陷网站服务器？  如何撰写建站申请书？关键要点有哪些？  如何用PHP快速搭建CMS系统？  进行网站优化必须要坚持的四大原则  Laravel怎么配置自定义表前缀_Laravel数据库迁移与Eloquent表名映射【步骤】  如何在宝塔面板创建新站点？  如何在万网利用已有域名快速建站？  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  三星网站视频制作教程下载,三星w23网页如何全屏？  Win11怎么开启自动HDR画质_Windows11显示设置HDR选项  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  制作旅游网站html,怎样注册旅游网站？  Android自定义控件实现温度旋转按钮效果  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel如何实现密码重置功能_Laravel密码找回与重置流程  微信h5制作网站有哪些,免费微信H5页面制作工具？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  node.js报错：Cannot find module 'ejs'的解决办法  1688铺货到淘宝怎么操作 1688一键铺货到自己店铺详细步骤  Linux系统命令中tree命令详解  python中快速进行多个字符替换的方法小结  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  中国移动官方网站首页入口 中国移动官网网页登录  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  Laravel如何处理异常和错误？（Handler示例）  IOS倒计时设置UIButton标题title的抖动问题  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  Laravel如何处理CORS跨域问题_Laravel项目CORS配置与解决方案  Laravel如何创建自定义中间件？（Middleware代码示例）  Python高阶函数应用_函数作为参数说明【指导】  jQuery 常见小例汇总  昵图网官网入口 昵图网素材平台官方入口