图片自适应排列间距异常的根本原因是单位选择错误、display行为未理清及HTML空白符干扰；应改用flex+gap、响应式单位（vw/rem）并清除源码空白。
图片自适应排列时，间距“看起来没变”或“小屏挤成一团、大屏空得离谱”，根本不是 margin 写少了，而是单位选错 + display 行为没理清 + HTML 空白符在捣鬼。
为什么 margin: 10px 在手机上显得太宽、在桌面端又几乎看不见
固定像素值不随视口变化，视觉权重失衡是常态。更关键的是：img 默认是 inline 元素，margin-top/margin-bottom 实际受 line-height 和基线对齐干扰，常“不生效”。
- 用
rem：需确保根字体已响应式设置（如:root { font-size: clamp(16px, 4vw, 20px); }），否则margin: 1rem还是死值 - 用
vw：比如margin: 0 2vw;，左右留白随屏幕宽度缩放，但注意上下方向的vw仍按宽度算，非高度 - 避免
%用于垂直边距：margin: 2% 5%;的上下值也按父容器宽度计算，极易导致比例反直觉 - 慎用
em：嵌套层级一深，字体继承链会让边距失控，图文混排中尤其不稳定
display: flex + gap 是多图自适应间距最稳解法
它天然绕过 inline 基线问题、HTML 换行空白、以及手动 margin 的叠加/覆盖混乱。
- 父容器加
display: flex; flex-wrap: wrap;，图片自动并排，窄屏折行 - 用
gap: clamp(8px, 2vw, 16px);替代所有margin，横竖间距统一可控 - 图片自身可清掉
margin：.gallery img { margin: 0; }，避免与gap叠加 - 老版 Safari 不支持
gap？用@supports (gap: 1rem) { ... }包裹，降级方案写margin-right即可
HTML 源码换行和空格会偷偷加约 4px 间隙
这不是 bug，是浏览器把标签间的换行/缩进解析成了空格字符。两张
@@##@@ @@##@@
实际渲染出约 4px 不可控缝隙，且无法用 margin 精确抵消。
- 最彻底：删掉所有换行与空格，写成
- 次选：父容器设
font-size: 0;，再单独给图片内文字（如有）恢复字号，仅限纯图容器 - 别用
letter-spacing: -4px或负margin强凑——响应式断点切换后，空隙宽度可能变，负值立刻失效 -
vertical-align只解决垂直对齐（如底部空白），对这个水平缝隙无效
max-width: 100% 和父容器宽度必须同步处理
只调间距却不控图尺寸，小屏上图片撑破容器、gap 被压缩甚至消失，是常见连锁故障。
- 图片加
max-width: 100%; height: auto;，但前提是父容器有明确宽度来源（如flex: 1或width: 100%） - 若父容器是 Flex 项，必须加
min-width: 0;，否则max-width: 100%会被忽略 - 用
srcset+sizes匹配真实显示宽度，例如sizes="(max-width: 768px) 100vw, 50vw"，防止高分屏加载过大图导致间距比例失真 - 测试时打开 DevTools → Network → Filter “Large resources”，确认加载的是合适尺寸的图，而非仅靠预览判断
真正卡住人的，从来不是“怎么写 margin”，而是忘了 img 的默认 display 类型、没看清父容器的宽度是否真正生效、以及没意识到源码里那些看不见的换行符正在悄悄加空隙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
