图片间空隙源于img默认inline导致html空白字符被渲染，非margin问题；首选font-size:0父容器方案，或flex+gap现代布局，避免盲目调margin。
img 默认 inline 导致图片间空隙不是 margin 问题
图片之间出现空隙，不是因为你没写 margin，而是 <img> 默认是 display: inline 元素，HTML 换行符和空格会被渲染成一个“空白字符”，宽度约等于当前字体下 1 个空格——这个间隙和 margin 无关，删掉所有 CSS 也会存在。
用开发者工具检查，会发现两张图的盒模型之间有一段「看不见的文本节点」，它受父容器 font-size 和 line-height 控制。所以调 margin-bottom 或 padding 都不治本。
- 设
margin: 0无效——间隙来自 HTML 结构，不是样式 - 设
vertical-align: bottom只能消除底部对齐产生的额外空隙，不能消灭标签间的空白字符 - 用
float: left可绕过该问题，但需清浮动，维护成本高
父容器 font-size: 0 是最轻量的通用解法
既然空隙本质是「被渲染的空格字符」，而字符大小由父容器 font-size 决定，那么把父容器 font-size: 0 就能直接让它“不可见”。这是兼容性好、代码少、不改变布局流的首选方案。
注意：这不是 hack，是 CSS 规范明确支持的行为。只要父容器不包含需要显示的文字，就可放心使用。
- 只对父容器设
font-size: 0，不影响子元素继承（img本身不依赖字号） - 若父容器内还有文字，必须给文字单独设回正常
font-size，例如：p { font-size: 16px; } - 避免在
body或全局容器上滥用，否则整站文字会消失 - 配合
line-height: 0可进一步收紧垂直方向，但通常单设font-size: 0已足够
flex 布局 + gap 更适合现代多图场景
当图片数量固定或需响应式排列（如图库、卡片列表），用 display: flex 容器 + gap 是最干净、可控的方式。它完全脱离 inline 文本流，空隙由容器统一管理，不再受 HTML 换行干扰。
gap 的值作用于相邻项目之间，水平垂直均可独立控制，且不会塌陷、不依赖对齐方式。
- 横向等距：
.gallery { display: flex; gap: 12px; } - 仅控制水平间距：
column-gap: 12px - 仅控制垂直间距：
row-gap: 8px - IE 不支持
gap，需 fallback：margin-right: 12px+:last-child { margin-right: 0; }
display: block + margin-bottom 要防塌陷
把每张图设为 display: block 后，margin-bottom 确实能生效，但连续多个块级图片会触发外边距塌陷（margin collapse）：相邻两张图之间的实际距离，取的是两者 margin-bottom 中的较大值，而非相加。
比如第一张图 margin-bottom: 10px，第二张图 margin-bottom: 16px，它们之间只有 16px 间距，不是 26px。
- 想实现等距，统一用：
img:not(:last-child) { margin-bottom: 12px; } - 不要给所有图都设
margin-bottom，否则最后一张图下方会多出无意义的空白 - 若父容器有
overflow: hidden，过大的负margin可能被裁剪，慎用
真正难的不是选哪种方法，而是得先判断：这个空隙是来自 HTML 换行、baseline 对齐，还是布局流本身的限制。没看清源头就加 margin，大概率是在调试幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
