加 border-top: 1px solid transparent 能打断 margin 塌陷，因其在父子间创建非空边界，满足 CSS 规范中“存在 border/padding/content 即阻断合并”的条件，且视觉无影响、兼容性好。
为什么加 border-top: 1px solid transparent 能打断 margin 塌陷
这不是“修复 margin”，而是用透明边框在父子之间插了一道物理隔离层。CSS 规范规定：只要父元素存在 border、padding 或 content，子元素的 margin-top 就无法与其上边界合并——border-top: 1px solid transparent 满足这个条件，又不改变视觉外观。
border-top: 1px solid transparent 的实际效果与限制
它确实能 100% 阻断塌陷，但要注意这些细节：
-
box-sizing: border-box下，这 1px 会从父元素 width/height 内部消化，不额外撑大容器 - 若父元素已设
box-sizing: content-box（默认），则总高度会 +1px，可能影响 JS 计算的offsetHeight - 伪元素或绝对定位子项若依赖父元素边界（比如
top: 0），该边框会让它们相对偏移 1px - 在某些旧版 Safari 中，透明边框配合
transform可能触发渲染抖动，建议搭配will-change: transform缓解
比起 overflow: hidden，它更适合哪些场景
当你需要保留溢出行为，又不想引入 BFC 副作用时，透明边框是更轻量的选择：
- 父容器内有
position: absolute的下拉菜单、Tooltip 或阴影，且必须完整显示 - 父元素本身是滚动容器（如
overflow-y: auto），不能加overflow: hidden破坏滚动逻辑 - 项目需兼容 IE9+，而
display: flow-root在 IE 完全不支持 - 你正在做像素级对齐（比如设计系统组件库），希望避免
padding-top: 1px引起的高度漂移
容易被忽略的关键点
透明边框不是万能胶——它只解决“第一个子元素 margin-top 向上塌陷”这一种情况。如果父元素同时有 margin-bottom 和最后一个子元素的 margin-bottom，仍会发生向下塌陷；此时得同步处理 bottom 侧，比如加 border-bottom: 1px solid transparent 或统一用 display: flow-root 彻底隔离。
立即学习“前端免费学习笔记（深入）”；
