外边距重叠（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。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须作用于
<table> 元素本身，写在 <code><th> 或 <code><td> 上无效 <li>三行 CSS 缺一不可：<code>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: auto在缩放或高 DPI 场景下可能意外出现滚动条 -
overflow: clip更干净，但仅支持 Chrome 82+ / Firefox 73+ / Safari 15.4+ - 若父元素已有
position: relative，加overflow: hidden可能导致子元素position: absolute定位基准偏移 -
padding: 1px或border: 1px solid transparent会改变盒模型尺寸 - 当元素宽度是
width: 100%或参与grid/flex计算时，容易引发横向溢出或错位 - 响应式断点切换时，这些“隐形像素”可能突然暴露为布局裂缝
- 调试时看到 margin 生效了，别急着提交——先检查是否因 padding/border 导致高度/宽度失准
慎用 overflow: hidden 的真实代价
它能触发 BFC 阻断塌陷，但副作用比想象中更常见。
别碰 padding 和 border 这类物理隔离法
它们靠“加像素”骗过浏览器合并判定，短期有效，长期埋雷。
最易被忽略的一点：兄弟元素间的 margin 合并，不能靠“只设一个 margin”来规避；一旦 DOM 动态插入新节点，规则立刻失效。真正稳定的方案永远是让容器自己脱离普通流——要么用 display: flow-root，要么换布局模型（flex + gap）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
