这不是 bug，是 css 规范定义的外边距合并行为：子元素 margin-top 与无 border/padding/bfc 的父元素上边界合并，导致父元素整体下移；加 padding-top: 1px 或 display: flow-root 可中断合并。
这不是 bug，是 CSS 规范明确定义的外边距合并（margin collapse）行为：当父元素没有 border-top、padding-top，且未触发 BFC 时，子元素的 margin-top 会直接和父元素的上边界合并，浏览器把它算在父元素“外面”——结果就是父元素整体下移，但自身高度不变。
为什么加 padding-top: 1px 就能立刻解决
因为外边距合并发生的前提，是父子之间“无缝对接”：既无内容、也无 border-top、也无 padding-top。只要插入任意一个物理分隔层，合并逻辑就中断。
-
padding-top: 1px是最轻量、语义最贴近的解法——你本意就是留白，它不改变盒模型渲染流，也不裁剪box-shadow或position: absolute子项 - 别用
padding-top: 0或border-top: none，这些是默认值，不构成隔离 - 如果父元素本身有
height: 100%或需精确控制背景覆盖范围，padding-top: 0.1px比1px更安全，视觉无差别，但高度扰动更小
display: flow-root 是现代项目首选
它专为阻断外边距合并而设计，创建 BFC 且无副作用：不裁剪、不加滚动条、不影响定位、不改变尺寸计算。
- 兼容性已稳定：Chrome 64+ / Firefox 59+ / Safari 15.4+ / Edge 79+
- 写法极简：
.parent { display: flow-root; } - 比
overflow: hidden更可靠——后者可能意外隐藏 Tooltip、下拉菜单或横向溢出内容 - IE 完全不支持，老项目可降级为
overflow: hidden，但必须确认父容器内无真实溢出需求
为什么 overflow: hidden 有时会“修出新问题”
它确实能触发 BFC，但本质是靠渲染隔离，不是“关闭合并开关”。
- 若父元素本身是
inline或inline-block（比如span包裹），overflow不生效 → 必须先加display: block - 在高 DPI 屏幕或缩放场景下，
overflow: auto可能无故出现滚动条 -
overflow: hidden会裁剪box-shadow、outline、transform: scale()的溢出部分，调试时容易误判视觉异常来源
真正容易被忽略的是：这个现象只发生在普通文档流的块级元素之间，且仅限垂直方向；一旦父容器改用 display: flex 或 display: grid，问题天然消失——因为 Flex/Grid 的间距机制（gap）根本不参与外边距合并流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
