这是典型的外边距折叠现象：子元素的margin-top因父元素缺乏隔离层（如border、padding或bfc触发属性）而作用于父元素，导致父元素下移；可通过overflow:hidden、padding-top替代或改用flex布局解决。
父元素被子元素的 margin-top 拉下来了
这是典型的外边距折叠（margin collapse）现象：当子元素设置了 margin-top，而父元素没有边框、内边距或清除浮动等“隔离层”时，这个 margin-top 会直接作用到父元素上，导致父元素整体下移——看起来像 margin-top 失效，其实是“跑错地方”了。
- 常见错误现象：
div看起来没顶住顶部，和上一个块之间空了一大截，检查发现子元素明明只设了margin-top: 20px，但父容器却跟着往下掉了 - 触发条件：父元素
padding-top为0、border-top为none、且未设置overflow（非visible）等触发 BFC 的属性 - 不是所有浏览器都“一样塌”，chrome/firefox 表现一致，但某些旧版 safari 在缩放后可能表现不稳定
用 overflow: hidden 破掉外边距折叠
最轻量、兼容性好（IE8+）、不改变布局流的解法：给父元素加 overflow: hidden 或 overflow: auto。它会触发 BFC（块级格式化上下文），让父元素成为外边距折叠的“边界”。
- 别写
overflow: visible——这是默认值，不起作用；也别写overflow: scroll，除非你真需要滚动条 - 如果父元素里有下拉菜单、Tooltip 等需要溢出显示的内容，
overflow: hidden会裁剪它们，这时得换方案 - 移动端要注意：ios Safari 对
overflow: hidden的 touch 行为有时会抑制弹性滚动，可改用overflow: clip（仅支持较新版本）
用 padding-top 替代 margin-top
如果控制的是子元素自身位置，且父元素允许留白，直接把 margin-top 换成父元素的 padding-top 更稳妥——padding 不参与外边距折叠，语义也更清晰。
- 适用场景：卡片容器、表单区块、模块化布局中“内部间距”的统一管理
- 注意不要混用：比如父元素设了
padding-top: 20px，子元素又设margin-top: 10px，结果就是 30px 间距，容易误判 - 如果子元素是绝对定位（
position: absolute），它的margin-top就不会折叠，但此时它已脱离文档流，跟父元素位移无关了
Flex 容器天然免疫这个问题
只要父元素是 display: flex 或 display: inline-flex，子元素的 margin-top 就不会导致父元素位移——Flex 布局有自己的对齐规则，不走传统外边距折叠逻辑。
立即学习“前端免费学习笔记（深入）”；
- 哪怕只为了修复这一个问题，把
div改成display: flex也是合理选择，尤其现代项目基本都支持 - 记得补上
flex-direction: column（如果子元素是竖排），否则默认是横排，可能打乱原有结构 - IE10/11 对 Flex 的 margin 支持有 bug：子元素
margin-top在某些情况下仍会“穿透”，建议加align-items: flex-start配合使用
外边距折叠不是 bug，是 css 规范明确规定的渲染行为。真正容易被忽略的是：它只发生在块级盒模型的垂直方向，且必须双方都处于同一个 BFC 中——所以问题从来不在 margin-top 本身，而在你没意识到父元素其实“透明”得有点过分。