图片水平缝隙不均匀的根源是html空白符，即标签间换行或空格被浏览器解析为约4px宽空格；最彻底解法是删除所有换行与空格，写成连续标签，次选font-size: 0;，而vertical-align仅解决垂直对齐问题，flex+gap才是现代多图布局首选方案。
图片水平缝隙不均匀的根源是HTML空白符
两张 <img> 标签之间换行或空格，会被浏览器解析为一个空格字符（约 4px 宽），导致视觉上“缝隙不均”——尤其当图片宽高不一致时，这个固定空白会显得更突兀。这不是 margin 没生效，而是源码里看不见的空格在作怪。
- 最彻底解法：删掉所有
<img>标签之间的换行和空格，写成<img src="a.jpg"><img src="b.jpg"><img src="c.jpg"> - 次选方案：给父容器设
font-size: 0;，再单独给图片内文字（如有）恢复字号，但仅适用于纯图容器 - 慎用
letter-spacing: -4px;或word-spacing: -4px;——兼容性差，且对非图片子元素有副作用
vertical-align 不是万能解，bottom/middle/top 效果差异大
vertical-align 只对 inline 和 table-cell 元素有效，而 <img> 默认就是 inline，所以它能解决底部缝隙，但不同取值表现差别明显：
-
vertical-align: bottom;把图片底边对齐行框底边，消除 baseline 空隙，最常用 -
vertical-align: middle;对齐行框中线，但中线位置受line-height影响，父容器若没设line-height: 1;，仍可能残留空隙 -
vertical-align: top;对齐行框顶边，适合顶部对齐场景，但若父容器有 padding-top，图片可能被“顶出” - 避免用
vertical-align: baseline;（默认值）或inherit，它们会复现问题
负外边距（margin）只适合微调，不能替代布局模型
用 margin-left: -4px; 或 margin-bottom: -2px; 看似能“吃掉”缝隙，但本质是硬凑，容易在以下情况翻车：
- 响应式断点切换时，字体大小变化导致空隙宽度改变，负值失效
- 图片尺寸不一致（比如一张 200×150，另一张 300×200），负 margin 无法统一抵消
- 父容器用了
text-align: center;，负 margin 会让图片整体偏移，破坏居中 - 后续新增图片或 DOM 结构变动，需重新计算所有负值，维护成本高
Flex + gap 是现代多图排列的首选方案
当图片数量 ≥3 或需要响应式换行时，display: flex 配合 gap 几乎无脑可靠，且天然规避空白符和 baseline 问题：
- 父容器加
display: flex; flex-wrap: wrap; gap: 12px;，所有间隙自动均分、可控 -
justify-content: space-between;或space-around;控制水平分布逻辑 - 老版 Safari 不支持
gap？用@supports (gap: 1rem)做降级：img { margin-right: 12px; }<br>@supports (gap: 1rem) { .container { gap: 12px; margin-right: 0; } } - 注意：不要给单个
<img>设margin，否则会和gap叠加，造成双倍间距
真正麻烦的不是怎么“塞掉缝隙”，而是判断缝隙来自哪一层：HTML 源码空白、inline 对齐行为、还是父容器 line-height 泄露。先开开发者工具看 computed styles，再决定动 HTML、CSS 还是布局模型——多数人卡在第一步就瞎试 margin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
