列表图片margin缩放后忽大忽小，是因px单位在缩放下视觉失衡、img默认inline导致垂直margin失效、line-height干扰及HTML源码空格叠加所致；应改用flex+gap布局并清除源码空白。
为什么列表里图片的 margin 在缩放后“忽大忽小”
不是浏览器 bug，是单位语义和布局上下文错位了。比如写 margin: 10px，在 125% 缩放下，10px 物理像素不变，但字体、行高、容器尺寸都按比例放大，导致视觉间距被挤压或拉空；再叠加 img 默认 display: inline 的基线对齐行为，垂直方向 margin 更容易“失联”。
- 别用固定
px控制列表图片间距，尤其当父容器用%或flex动态分配宽度时 - 检查 computed styles 中
img的display值——如果还是inline，margin-top/margin-bottom就大概率不按预期生效 - 列表项（
li）若设了line-height，它会直接影响 inline 图片底部空白，哪怕你清了margin
Flex 列表容器中用 gap 替代 margin 更稳
当图片放在 ul 或 ol 里，且每个 li 只含一张 img，直接把列表设为 flex 容器，用 gap 管理间距，比逐个调 margin 干净得多。
- 给
ul加：display: flex; flex-wrap: wrap; gap: 1rem;—— 横向纵向间距统一，响应式友好 -
gap不受vertical-align或line-height干扰，也不依赖img的display类型 - 老版 Safari 需 fallback：
margin-right: 1rem;+@supports (gap: 1rem) { ul { gap: 1rem; margin-right: 0; } } - 别在
img上写margin，否则和gap叠加，间距翻倍
响应式单位选 rem 还是 clamp()？看父容器是否动态
如果列表容器宽度随视口变化（比如 width: 90% 或 flex: 1），用 rem 更可靠；如果要严格跟随视口宽高比变化（如全屏轮播图列表），clamp(8px, 2.5vw, 16px) 更精准。
-
rem依赖:root的font-size，适合整体节奏一致的 UI，例如：:root { font-size: clamp(14px, 2.5vw, 18px); } ul { gap: 1.5rem; } -
%单位慎用：图片margin-bottom: 2%是按父容器宽度算的，不是高度，小屏下可能比预想的大很多 - 避免
em：嵌套列表中，em会继承父font-size，极易失控 - 测试时用 Chrome DevTools 的 “Toggle device toolbar” + “Viewports” 切换不同宽高比，观察间距是否连续变化
HTML 源码空格也会造成“隐形间距”
这个最容易被忽略：两个 <img> 标签之间换行或缩进，在 HTML 解析时会生成一个空格字符，渲染为约 4px 的间隙，和 CSS margin 叠加后，实际间距比写的多出几像素。
立即学习“前端免费学习笔记（深入）”；
- 删掉源码中
img标签之间的所有空白符，写成<img><img><img>最彻底 - 或给列表容器设
font-size: 0;，再单独给图片内文字（如有）恢复字号，仅适用于纯图容器 - 如果用了
flex+gap，这个空隙仍存在，但会被gap覆盖——前提是没同时写margin - 用 DevTools 的 “Elements” 面板检查
img元素之间是否有 #text 节点，有就是源码空格
display 类型、img 的默认 inline 行为、源码空格的存在，以及响应单位在不同缩放层级下的计算逻辑——这四者任一没对齐，间距就会在某个缩放比例或设备上突然跳变。 
