外边距塌陷不是bug，是css规范定义的margin-collapse行为；根本解决需从格式化上下文或布局模型层面打断合并条件：优先用display:flow-root触发bfc，或改用flex/grid+gap布局。
外边距塌陷不是 bug，是 CSS 规范定义的 margin-collapse 行为，直接硬调 margin 数值解决不了根本问题；真正有效的手段得从格式化上下文或布局模型层面打断合并条件。
给父元素触发 BFC：优先用 display: flow-root
这是现代标准解法，专为解决塌陷设计，语义清晰、无副作用。
-
display: flow-root会创建新的块级格式化上下文（BFC），内部margin不再与外部合并 - 写在父容器上即可：
.parent { display: flow-root; } - 不改变尺寸、不裁剪
box-shadow、不影响position: absolute子元素定位 - 兼容 Chrome 64+ / Firefox 59+ / Edge 79+ / Safari 15.4+；IE 完全不支持，需降级
改用 flex 或 grid + gap 布局
如果你本就在控制容器结构（如列表、表单组、卡片流），gap 是根治方案，彻底绕过 margin 合并逻辑。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
display: flex; flex-direction: column; gap: 16px;—— 垂直间距由gap管理，不会被合并 -
gap支持响应式单位，比如gap: clamp(8px, 2vw, 16px) - 别在 flex 容器自身再设
margin来“补空隙”，那又回到塌陷起点 - 注意：
gap在flex-direction: row下作用于水平方向，别用错方向
慎用 overflow: hidden 触发 BFC
它兼容性最好（IE6+），但副作用真实存在，不是“安全 fallback”。
- 本质是靠创建渲染隔离区阻断合并，不是靠“隐藏溢出”起作用
- 若父元素内有
position: absolute元素超出边界、下拉菜单、或依赖box-shadow扩展的视觉效果，可能被意外裁剪 -
overflow: auto在高 DPI 缩放或某些响应式断点下，可能无故出现滚动条 - 如必须兼容老浏览器，建议搭配透明边框：
border-top: 1px solid transparent，比overflow更可控
真正容易被忽略的点是：塌陷只发生在垂直方向、普通流块级元素之间；水平 margin 永远不合并，也无需处理。别为了“看起来整齐”而统一加 padding 或 border，那会悄悄破坏盒模型计算，尤其在 width: 100% 或 Grid/Flex 约束场景下更容易引发溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
