这是父子外边距合并现象：子元素margin-top因父元素无border、padding或bfc而“穿透”并与其上边界合并，导致父元素下移；最轻量解法是父元素加padding-top: 1px，或用overflow: hidden触发bfc。
父元素吞掉子元素 margin-top 怎么办
这是最典型的父子外边距合并现象：给子元素设 margin-top，结果父元素顶部直接“长出”这段距离，子元素没动，父元素却像被顶起来了。本质是子元素的上外边距“穿透”了父容器，和父元素自身的上外边距（或 body 的）合并了。
- 只要父元素没 border、没 padding、没内容、没 BFC 触发条件，且子元素在普通文档流中，就一定会发生
- 不是 bug，是 CSS 规范定义的行为，但开发中几乎总是要阻止它
- 最轻量的解法是给父元素加
padding-top: 1px—— 不影响布局视觉，但立刻打断合并 - 如果父元素需要保持“无内边距”语义，改用
overflow: hidden或overflow: auto（注意：后者可能触发滚动条，慎用）
为什么 overflow:hidden 能解决但 display:inline-block 不行
overflow: hidden 的关键作用是触发 BFC（块格式化上下文），让父元素变成一个独立的布局容器，内部的 margin 不再和外部“沟通”。而 display: inline-block 虽然也能触发 BFC，但它会改变元素的默认行为：变成行内级盒子，受 white-space 和换行影响，且默认有基线对齐带来的额外空白。
-
overflow: hidden对布局干扰最小，推荐优先使用 -
display: inline-block在父元素是div且需保持块级特性时，反而容易引入新问题 -
display: flex或display: grid同样能隔离 margin，但会彻底改变子元素排布逻辑，仅在本就用 Flex/Grid 布局时顺带解决
给父元素加 border 真的靠谱吗
加 border: 1px solid transparent 是有效解法，原理是用 border 物理隔开父子 margin —— 只要存在 border、padding 或 content，合并就失效。但要注意：
- 透明边框不影响视觉，但会增加 2px 的盒模型尺寸（左右各 1px），若父元素宽度设为 100%，可能引发横向溢出
- 如果父元素已有 border 且颜色/样式不能改，加
border-top: none不行，必须真实存在 top border 才起作用 - 比起加 border，
padding-top: 0.1px更隐蔽、更可控，且不增加渲染开销
绝对定位子元素能避免合并吗
可以，但代价大。把子元素设为 position: absolute，它就脱离普通文档流，自然不再参与外边距合并。但这也意味着：
- 父元素高度塌陷（除非父元素也设了高度或其它撑高方式）
- 子元素脱离流式布局，无法响应父容器尺寸变化
- 需要手动计算
top值来模拟原本的margin-top效果，维护成本高 - 只适合极少数固定位置、不随内容伸缩的场景，比如角标、装饰性元素
真正需要稳定控制父子间距时，别绕远路——加 padding-top 或 overflow: hidden 是最直接、最可预测的选择。复杂布局里，外边距合并看似小问题，但一旦和 flex、grid、transform 混用，行为会更难推断，优先用确定性强的方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
