图片底部3–4px空白源于img默认inline且vertical-align:baseline，为字母g/y预留descender空间；解决首选display:block或vertical-align:bottom。

img 默认是 inline 元素，所以底部有空隙

这不是 margin 或 padding 导致的，而是浏览器把 <img> 当作文本字符处理的结果：它默认对齐基线（vertical-align: baseline），而基线下方要预留 descender 空间（比如字母 “g” 的下挂部分），哪怕容器里没文字，这个空间也存在。实测间隙通常为 3–4px，且随 font-size 和 line-height 变化。

display: block 是最稳妥的解法

只要图片不需和文字混排，直接设 display: block 就能彻底跳出行内格式化上下文（IFC），不再参与基线对齐。

• img { display: block; } —— 单图场景首选，无副作用
• 若需水平居中，用 margin: 0 auto;，别依赖 text-align: center（对块级无效）
• 注意：设为 block 后，vertical-align 失效，也不再响应父容器的 font-size

vertical-align: bottom 比 top 更可靠

当必须保留 inline 或 inline-block 行为（比如图文混排、按钮图标），优先选 vertical-align: bottom。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• img { vertical-align: bottom; } —— 对齐行框底线，避开基线干扰
• vertical-align: top 在某些字体下仍可能留白，middle 容易因行高浮动而偏移
• 该属性只对 inline / inline-block 元素生效；设了 display: block 再写它没用

父容器 font-size: 0 要慎用

它能“物理消灭”换行符/空格产生的间隙，但代价明显：

• .container { font-size: 0; } + .container img { font-size: 16px; } —— 子元素必须显式重置字号
• 如果容器里还有文字，得给每个文字子元素单独设 font-size，否则不可见
• 在缩放或动态修改字体的场景下，容易漏重置，导致内容消失

真正麻烦的不是选哪个方案，而是得先判断：空隙是单图底部的基线问题，还是多图并排时 HTML 换行符导致的间隙——两者成因不同，混用解法反而会让问题更难定位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！