这是 css 外边距折叠现象：父元素无 padding/border 且未触发 bfc 时，子元素 margin-top 与其上边界合并，导致父元素下移；可用 padding-top、display: flow-root 或 display: flex 规避。
为什么子元素的 margin-top 会让父元素“掉下去”
这不是 bug，是 CSS 规范明确定义的外边距折叠（margin collapse）行为：当父元素没有 padding-top、border-top，且未触发 BFC（块级格式化上下文）时，第一个子元素的 margin-top 会直接与父元素上边界合并，取较大值后作用在父元素自身 margin 上——你看到的“下移”，其实是父元素被自己的 margin 推开了。
常见误判现象包括：Computed 面板里父元素的 margin-top 显示为子元素的值；设计稿对齐总差几像素；明明只给子元素加了 margin-top: 20px，但父容器和上一个兄弟元素之间却空出了 20px。
用 padding-top 替代 margin-top 最稳妥
把原本写在子元素上的 margin-top: 20px，挪到父元素上写成 padding-top: 20px，就能彻底绕过折叠逻辑——padding 不参与外边距折叠，语义也更准确：这是容器内部留白，不是子元素向外的“推力”。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 适合卡片、表单区块、模块化布局等需要统一内边距的场景
- 注意别混用：如果父元素已设
padding-top: 20px，子元素再加margin-top: 10px，结果就是 30px，容易误判间距来源 - 对像素敏感的布局（比如和设计稿严格对齐），要记得
padding会真实增加父元素高度
display: flow-root 是现代项目的根治方案
display: flow-root 是专为触发 BFC 设计的属性，无裁剪、无定位副作用，Chrome 64+/Firefox 59+/Safari 15.4+ 都支持。它比 overflow: hidden 更干净，也不像 float 或 position: relative 那样干扰层叠上下文或布局流。
示例写法：
.parent { display: flow-root; }
.child { margin-top: 20px; }
- 若需兼容 IE 或老 Safari，再降级用
overflow: hidden或伪元素清除法（::before { content: ""; display: table; }） -
overflow: auto或scroll已触发 BFC，不必额外加hidden - 某些 CSS-in-JS 库会把
overflow: 'hidden'自动转成overflow: 'clip'——而后者不触发 BFC，问题照旧
display: flex 容器天然免疫这个问题
只要父元素是 display: flex 或 display: inline-flex，子元素的 margin-top 就不会导致父元素位移——Flex 布局有自己的对齐规则，不走传统外边距折叠逻辑。
- 哪怕只为了修复这一个问题，把
<div> 改成 <code>display: flex也是合理选择 - 记得补上
flex-direction: column（如果子元素是竖排），否则默认横排会打乱结构 - IE10/11 对 Flex 的
margin支持有 bug：子元素margin-top在某些情况下仍会“穿透”，建议加align-items: flex-start
真正起作用的永远是父元素是否设置了能阻断折叠的“隔离层”，而不是子元素写了多少个
margin-top。最容易被忽略的是：父元素本身是 inline 或 inline-block（如 <span></span>、<img> 包裹），此时 overflow 对非块级元素无效——必须先加 display: block。
