display: block 是最稳妥解法，因图片默认为 inline-replaced 元素，基线对齐产生 2–4px 空隙；设为 block 后脱离行内上下文，空隙消失，且兼容性好、无副作用。
直接设 display: block 是最稳妥、副作用最小的解法；float 能用，但必须配套处理父容器塌陷和换行逻辑，否则容易出错。
为什么 display: block 有效且推荐
图片默认是 inline-replaced 元素，浏览器会为其预留基线对齐所需的下行间距（约 2–4px），这个空隙不是 margin 或 padding，而是行内布局的固有行为。一旦设为 display: block，它就彻底脱离行内上下文，不再参与基线对齐，空隙自然消失。
-
vertical-align和line-height对它完全失效，无需额外清理 - 不干扰图文混排以外的其他布局逻辑（比如 Flex/Grid 容器内嵌浮动图）
- 兼容所有现代浏览器，包括旧版 IE8+
- 若图片需响应式缩放，配合
max-width: 100%和height: auto即可安全使用
float 可以用，但必须注意三个前提
仅当明确需要文字环绕、或存量项目无法改结构时才考虑 float。它本身不解决空隙，只是“绕过”了行内对齐——但副作用更隐蔽。
- 浮动后
vertical-align属性被忽略，写上去也没用 - 父容器高度会塌陷，必须清除浮动：
overflow: hidden、display: flow-root或伪元素::after清除 - 多张图浮动时，若总宽度 +
margin超出容器，会意外换行或重叠；建议统一用margin-right控制间隔，并加max-width: calc(100% / N)防溢出
别踩这些常见坑
很多方案看似能“压掉”空隙，实则埋雷：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 0或line-height: 0在父容器上设置：会导致内部所有文本不可见，除非逐个重置子元素的font-size，维护成本高 - HTML 中删空格/换行来“消除间隙”：代码可读性差，CI/CD 或 CMS 输出时极易被格式化工具自动加回，不可靠
- 误用
vertical-align: bottom配合float：该属性对浮动元素无效，写了等于没写 - 用
inline-block替代float：虽能避免塌陷，但自身带空隙（源于 HTML 空格），还得额外处理，不如直接block干净
真正关键的点在于：间隙根源不在浮动，而在 img 的默认显示类型。所以优先从 display 入手，比在 float 上打补丁更可控。如果项目已大量使用浮动，务必同步检查父容器是否塌陷、换行是否符合预期——这两处最容易被忽略。
