flex容器设固定高度或overflow:hidden时，子元素margin-bottom会被裁剪而非消失；应改用gap属性替代，它不受父容器限制且更可靠。
Flex容器设了固定高度，子元素margin-bottom被裁掉
当父容器设置了height（比如height: 300px）或max-height，而子元素总高度 + 所有margin-bottom之和超出了这个限制，浏览器会优先保证内容可见性，把超出部分裁剪掉——margin-bottom不是“消失”，是被父容器的盒边界物理截断了。
- 检查父容器是否用了
height、max-height或overflow: hidden；这些组合会让margin-bottom在视觉上“失效” - 用开发者工具选中子元素，看Computed面板里
margin-bottom值是否存在、是否被标记为“applied but not visible” - 临时给父容器加
outline: 1px solid red，确认它的实际渲染高度是否真卡死了 - 如果必须控高，改用
min-height代替height，让容器能随内容+margin自然撑开
Flex容器overflow: hidden导致margin-bottom不可见
overflow: hidden本身不阻止margin计算，但它会裁掉溢出区域——包括子元素的margin-bottom延伸部分。尤其在滚动容器（如uniapp的<scroll-view></scroll-view>）或固定高度卡片中，这是最隐蔽的“失效”原因。
- 哪怕子元素没溢出内容，只要它的
margin-bottom延伸到了父容器边界之外，就会被裁掉 - 在uniapp等跨端框架中，
<scroll-view></scroll-view>默认overflow: hidden，且对margin的渲染更保守，margin-bottom基本无效 - 验证方式：临时删掉父容器的
overflow声明，或改成overflow: visible，看margin-bottom是否突然出现 - 替代方案：用
padding-bottom代替margin-bottom（作用于父容器），或改用gap（推荐）
为什么gap比margin-bottom更可靠
gap是布局容器级属性，它插在项目之间，不依赖子元素自身的盒模型，也不会被父容器高度或overflow裁剪。在Flex中，它绕过了所有margin相关的塌陷、折叠、截断问题。
-
gap只在display: flex且flex-direction: column时控制垂直间距；row方向则控制水平间距 - 现代浏览器（Chrome 84+/Firefox 63+/Safari 14.1+）已全面支持，无需前缀
- IE11不支持
gap，但如果你还在兼容IE11，大概率也不该用Flex做主布局了 - 写法示例：
.container { display: flex; flex-direction: column; gap: 12px; }，子元素完全不用写margin-bottom
最后一个子元素的margin-bottom要不要留
即使margin-bottom生效了，给最后一个子元素留它也常是多余甚至有害的——它会在容器底部额外空出一段无意义的空白，尤其在滚动区域或卡片底部，容易造成误触或视觉断裂。
- 用
:not(:last-child)精准控制：.item:not(:last-child) { margin-bottom: 12px; } - 避免用
.item:last-child { margin-bottom: 0; }，因为这要先渲染再覆盖，不如一开始就排除 - 如果用
gap，它天然不作用于容器边缘，所以最后一项下面不会有额外空隙 - 在
<scroll-view></scroll-view>这类滚动容器里，留这个margin-bottom还可能触发非预期的滚动高度计算偏差
margin-bottom，而是你得同时判断：容器有没有高度限制、有没有overflow、是不是滚动上下文、要不要兼容老环境——这些条件一叠加，margin就从工具变成雷区。直接用gap，多数时候就是最省心的解法。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
