flex容器中margin-top/bottom失效主因是未设display:flex或主轴方向不匹配；column时沿主轴生效，row时作用于交叉轴易被align-items截断；推荐优先用gap替代margin以避免外边距合并等问题。
margin-top/bottom在flex容器里为啥不生效
因为父容器没设display: flex或设了但没指定主轴方向，margin-top和margin-bottom在flex子项上依然有效，但若父容器是flex-direction: column，此时margin-top/margin-bottom会沿主轴起作用——可正常撑开间距；但很多人误以为“flex里margin失效”，其实是没搞清主轴方向。
常见错误现象：margin-bottom写在flex子元素上，但相邻元素贴得死紧，没空隙。
- 检查父容器是否设置了
display: flex且flex-direction为column（垂直布局） - 若父容器是
row（默认），margin-top/margin-bottom仍有效，但作用在交叉轴，可能被容器align-items截断或重叠 - 更稳妥的做法：用
gap代替margin，它专为flex/grid设计，不会触发外边距合并，也不受书写模式干扰
垂直间距用margin还是padding更可控
看控制权在谁手上：margin由当前元素“向外推”，padding由父容器“向内撑”。实际中margin更常用，但容易踩外边距合并（margin collapse）的坑。
典型场景：两个相邻标签，都设了margin-bottom: 20px，结果间距不是40px，而是20px——这就是外边距合并。
- 块级元素上下相邻时，
margin-top和margin-bottom会取较大值，不是相加 -
padding完全不会合并，但需要你控制父容器，比如给父元素加padding-top来替代子元素的margin-top - 想彻底规避合并？给父容器设
overflow: hidden、border或padding（哪怕1px），就能创建BFC，阻止子元素外边距溢出
vertical-align对margin-top/bottom有没有影响
没有。vertical-align只对inline、inline-block、table-cell元素生效，且影响的是元素在行框内的对齐位置，跟margin-top/margin-bottom是两套机制，互不干扰。
容易混淆的点：给img设vertical-align: middle后，周围文字看起来“间距变了”，其实是基线对齐导致行高变化，不是margin动了。
-
vertical-align不改变元素自身的盒模型尺寸，也不触发重排以外的副作用 - 如果想靠
vertical-align调垂直间隙，说明布局模型选错了——该用flex或grid的地方硬套inline布局 - 真正要调垂直间距，优先用
margin、gap或transform: translateY()（后者适合微调，不占文档流）
移动端rem/vw布局下margin-top/bottom怎么适配
直接写rem或vw就行，但要注意：浏览器对小数值的渲染精度有限，比如margin-top: 0.05rem在某些安卓WebView里可能被四舍五入为0。
性能影响不大，但兼容性有坑：老版iOS Safari对vw在meta viewport缩放后计算不准，导致margin-bottom: 2vw在横屏时突然变大。
- 推荐方案：用
rem+ 根字体动态计算（如JS设置document.documentElement.style.fontSize），比vw稳定 - 避免写小于
0.1rem的值，尤其是用于分隔线或图标间距时 - 如果必须用
vw，加个min-width兜底，比如margin-bottom: max(8px, 2vw)（支持max()的现代浏览器）
最常被忽略的是：在flex或grid容器里混用rem margin和gap，结果gap按设备像素算，margin按根字号算，视觉节奏会错乱。统一用一种方式更安全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
