scroll-view或overflow:auto容器会忽略子元素margin-bottom，因其为固定高度bfc，仅按内容高+padding计算尺寸；flex中align-items:stretch导致margin-bottom悬空；空元素margin-bottom易折叠；gap是替代margin-bottom最可靠的方案。
scroll-view 或 overflow:auto 容器会“吃掉” margin-bottom
uniapp 的 <scroll-view></scroll-view>、或原生 CSS 中设了 height + overflow: auto/hidden 的容器，本质是固定高度的 BFC 容器。它只按内容高度 + padding 计算自身尺寸，而子元素的 margin-bottom 不参与这个计算——哪怕值存在，也会被忽略，导致最后一个子元素紧贴容器底边。
常见表现：
-
.empty-space { margin-bottom: 50rpx; }在<scroll-view></scroll-view>末尾完全不生效 - 开发者工具里
Computed面板显示margin-bottom: 50rpx，但实际布局无空白 - 临时删掉父容器的
overflow或改成visible，margin-bottom立刻出现
Flex 容器中 align-items: stretch 让 margin-bottom “悬空”
默认 align-items: stretch 会让子元素在交叉轴（通常是垂直方向）拉伸填满容器，但若子元素本身没内容、没高度、也没显式对齐控制，它的底边实际落在基线附近，margin-bottom 就悬在容器外部，既不撑高父容器，也不产生视觉间距。
这不是塌陷，是 Flex 布局模型下的对齐副作用。验证方式：
- 给子元素加
align-self: flex-start，margin-bottom立即生效 - 把父容器改成
align-items: flex-start，所有子项顶部对齐，margin-bottom可控 - 但更推荐直接弃用
margin-bottom，改用gap
空元素 + margin-bottom = 折叠而非消失
像 <view class="spacer"></view> 这类无内容、无 padding、无 border、无 min-height 的元素，它的 margin-bottom 会和下一个兄弟元素的 margin-top 合并，或者直接与父容器底边界折叠——结果就是“该有的空白没出现”，且 Computed 面板可能显示 0px 或标记为 collapsed。
能打破折叠的最小改动：
-
padding-bottom: 1px（最轻量，无视觉副作用） border-bottom: 1px solid transparentmin-height: 1px- 或直接不用空元素，改用伪元素：
::after { content: ""; display: block; margin-bottom: 40rpx; }
gap 是目前最可靠、最省心的替代方案
gap 是容器级属性，插在 Flex/Grid 项目之间，不依赖子元素盒模型，不受父容器高度、overflow、对齐方式或是否为空的影响。它天然规避了所有 margin 相关的折叠、悬空、截断问题。
使用前提与注意点：
- 父容器必须是
display: flex或grid，且flex-direction: column（垂直间距）或row（水平间距） - 现代浏览器全面支持（Chrome 84+ / Firefox 63+ / Safari 14.1+），IE11 不支持，但已不建议作为主布局目标
- 别混用：
gap: 12px和子元素的margin-bottom同时存在，响应式切换时容易意外合并成单倍间距 - 写法极简：
.container { display: flex; flex-direction: column; gap: 12px; }，子元素完全不用写任何 margin
真正容易被忽略的是：你看到的 margin-bottom 在 Styles 面板里“开着”，不代表它在布局中起效；得看 Computed 值是否为 collapse、是否被裁剪、是否悬空——而 gap 从不玩这些隐藏逻辑，设多少，就真有多少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
