外边距重叠（margin collapse）不是 bug，是 CSS 规范定义的垂直方向块级元素间的行为；必须从格式化上下文或布局模型层面打断合并条件，display: flow-root 是现代标准解法，专为解决塌陷设计，语义清晰、无副作用。
外边距重叠（margin collapse）不是 bug，是 CSS 规范定义的垂直方向块级元素间的行为；直接调 margin 数值无法根治，必须从格式化上下文或布局模型层面打断合并条件。
用 display: flow-root 阻断父子 margin 塌陷
这是现代标准解法，专为解决塌陷设计，语义清晰、无副作用。
- 写在父容器上即可：
.parent { display: flow-root; } - 不会改变尺寸、不裁剪
box-shadow或position: absolute子元素 - 兼容 Chrome 64+ / Firefox 59+ / Edge 79+；IE11 不支持，需回退
- 别和
display: block混用——它会覆盖掉flow-root效果
用 border-collapse: collapse 解决表格“双线”问题
表格边框缝隙和 margin 塌陷无关，但常被误认为同一类问题；真正要关的是 border-collapse。
- 必须作用于
<table>元素本身，写在<th>或<td>上无效 - 三行 CSS 缺一不可：
table { border-collapse: collapse; }、table { border: 1px solid #333; }、th, td { border: 1px solid #333; } -
border-collapse: collapse和border-spacing互斥，设了前者后者自动失效 - 它不解决横向溢出——小屏仍需外层
div+overflow-x: auto
慎用 overflow: hidden 的真实代价
它能触发 BFC 阻断塌陷，但副作用比想象中更常见。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 生效原理是创建独立渲染区，不是“遮住溢出”，所以对定位、阴影、下拉菜单都敏感
-
overflow: auto在缩放或高 DPI 场景下可能意外出现滚动条 -
overflow: clip更干净，但仅支持 Chrome 82+ / Firefox 73+ / Safari 15.4+ - 若父元素已有
position: relative，加overflow: hidden可能导致子元素position: absolute定位基准偏移
别碰 padding 和 border 这类物理隔离法
它们靠“加像素”骗过浏览器合并判定，短期有效，长期埋雷。
-
padding: 1px或border: 1px solid transparent会改变盒模型尺寸 - 当元素宽度是
width: 100%或参与grid/flex计算时，容易引发横向溢出或错位 - 响应式断点切换时，这些“隐形像素”可能突然暴露为布局裂缝
- 调试时看到 margin 生效了，别急着提交——先检查是否因 padding/border 导致高度/宽度失准
最易被忽略的一点：兄弟元素间的 margin 合并，不能靠“只设一个 margin”来规避；一旦 DOM 动态插入新节点，规则立刻失效。真正稳定的方案永远是让容器自己脱离普通流——要么用 display: flow-root，要么换布局模型（flex + gap）。
