子元素 margin-top 把父面板推下去了：用边界位置看清外边距折叠
子元素写了margin-top，背景色却没有覆盖上方那块空白，整个父面板反而向下移动。给父元素加一条透明边框以后又正常了，看起来像浏览器少算了一段高度。
这通常是普通块布局的垂直外边距折叠。父子之间没有相应边框、内边距或其他阻隔条件时，子元素的上外边距可能穿过父边界，与父元素的外边距一起参与外部布局。它并没有成为父元素内部的一块填充。
先用颜色和矩形位置把现象分开，再选择布局意图。想要面板内部留白，用padding往往更直接；想让父子外边距不折叠，则需要明确建立相应边界，而不是到处加看不见的边框。
用 flow-root 开关观察父边界
保存collapse-demo.html，在现代浏览器打开。深色横线是稳定参照，浅蓝色是父面板，橙色是子元素。按钮只切换父面板的display:flow-root。
<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<title>父子垂直外边距实验</title>
<style>
body { margin: 24px; font: 16px sans-serif; }
button { margin-bottom: 16px; }
.marker { height: 4px; width: 320px; background: #26374e; }
.panel { width: 320px; background: #dceafa; outline: 1px dashed #345; }
.panel.isolated { display: flow-root; }
.child { height: 40px; margin: 32px 0 0; background: #f4cb8b; }
pre { white-space: pre-wrap; margin-top: 32px; }
</style>
<button id="toggle" type="button" aria-pressed="false">切换父面板 flow-root</button>
<div class="marker"></div>
<section class="panel"><p class="child">子元素 margin-top:32px</p></section>
<pre id="report" role="status"></pre>
<script>
const panel = document.querySelector('.panel');
const child = document.querySelector('.child');
const marker = document.querySelector('.marker');
function report() {
const outer = panel.getBoundingClientRect();
const inner = child.getBoundingClientRect();
const reference = marker.getBoundingClientRect();
document.querySelector('#report').textContent = [
`父面板高度=${outer.height}`,
`父面板距横线=${outer.top - reference.bottom}`,
`子元素距父顶部=${inner.top - outer.top}`,
`父display=${getComputedStyle(panel).display}`
].join('\n');
}
document.querySelector('#toggle').addEventListener('click', event => {
const enabled = panel.classList.toggle('isolated');
event.currentTarget.setAttribute('aria-pressed', String(enabled));
report();
});
report();
</script>
</html>
初始父面板高度40px，距横线32px，子元素紧贴父面板顶部；开启flow-root后，父面板高度72px，距横线0，子元素在父内向下32px。外边距声明没有改变，变化的是它与父边界之间的折叠关系。
outline没有占布局空间，也没有像border那样为父子之间建立这条阻隔。这里故意用outline标记边界，避免为了画出框线，顺手把原本要观察的问题消掉。
margin 不等于容器内部空白
如果需求就是浅蓝面板内留出32px，直接在父元素写padding-top，并把子元素的那份外边距清理掉，会比依赖第一项margin更清楚。padding属于父盒子的内部区域，背景也会覆盖这部分。
若组件应保留子元素自己的排版外边距，则flow-root可以建立独立块格式化上下文，阻止这里的父子折叠，同时保留子元素规则。它还影响其他相关布局行为，因此应按组件范围使用，而不是给页面所有div统一补上。
透明border确实可能改变折叠条件，但也引入真实边框宽度，影响尺寸和命中区域。为了修复一个排版现象，到处堆1px透明边框，后续往往要再用calc抵消这些像素，意图越来越难看清。
overflow:hidden也经常碰巧建立所需边界，却同时可能裁掉阴影、弹出内容或溢出提示。修复方案除了能让数字看起来对，还应不引入不需要的裁剪语义。只需要布局隔离时，应该优先考虑明确表达这项意图的方式。
相邻块的外边距，不总是简单相加
父子折叠之外，相邻普通块的垂直外边距也可能折叠。两个正外边距常由较大者决定间隔，不是各留一份后相加；带负值时，计算又涉及最大正值与最小负值的组合，不能简单说“永远取最大值”。
所以标题下margin-bottom:24px，正文上margin-top:16px，实际间隔可能是24px而不是40px。设计系统若希望组件之间精确累加，应选明确的容器间距合同，而不是让每个组件同时向上下邻居索取一份margin。
空块还可能让自身上下外边距相互折叠，进而影响更远的元素。排查时不能只看紧邻两个节点的声明，要查看中间元素是否真的有高度、边框或内容形成边界。一个原本有文字的占位块变空，就可能让间距突然改变。
Flex 与 Grid 的 gap 是另一份布局合同
Flex和Grid项目之间的外边距不按普通块之间的同一折叠方式工作。把父容器改为flex，现象可能消失，但这也改变了整个布局模型，不能把display:flex当成无副作用的清除按钮。
若需求是列表项之间固定间隔，容器gap可以避免首尾额外margin，并把间距责任集中在容器里。但gap与项目自身margin可以同时存在，迁移时要检查原外边距是否仍然保留，免得旧问题刚消失就出现双倍空白。
普通长文排版允许段落外边距折叠，反而可能是需要的效果：标题和段落不因相邻两份margin叠出过大空白。不是所有折叠都应消除，应先问当前组件是在做文档排版，还是尺寸受控的面板布局。
这里的讨论采用普通水平书写方向，关注垂直块轴间距。改用其他书写模式时，应重新按块轴理解相应外边距，不要把“所有物理方向的margin都折叠”当成结论。水平方向的左右margin也不能拿这一组规则直接解释。
用位置差，而不是凭背景色猜高度
本页报告三个独立数字：父高度、父到前一节点距离、子到父顶部距离。它们能区分“外面多了间隔”与“里面保留了间隔”。只打印父高度或只看颜色，都容易把二者混成一次神秘位移。
可以把child的32改为48再切换一次，两种状态的间距归属仍应符合相同关系。随后给panel增加1px上边框，观察即使不开flow-root，父子关系也会改变。记得测量时把边框真实像素纳入预期，而不是继续沿用72这个数。
如果真实页面的结果与这里不同，先检查父元素是否已经是Flex/Grid、是否有padding或border，以及首项前面是否还有其他内容。对照条件不相同，不能只凭同样写了margin-top就认定是同一个问题。
