img底部空白源于其inline特性及基线对齐机制；vertical-align: top适用于需保留内联行为的场景，display: block则彻底脱离行内布局、适用于独立展示。
图片底部的空白不是 margin 或 padding，改了也没用；直接设 vertical-align: top 或 display: block 就能解决，选哪个取决于你是否需要保留图片的内联行为。
为什么 img 底部总有看不见的空白
因为 img 默认是 inline 元素，参与行内格式化上下文（IFC），它按基线（baseline）对齐——这个基线位置由父容器的 font-size 和 line-height 决定，和文字排版逻辑一致。空白其实是基线到行框底部之间的预留空间，开发者工具里 hover 不会高亮到 img 自身，而是显示在父容器或 body 的空白区域。
常见错误现象包括：
- 给
img设margin-bottom: 0或padding-bottom: 0完全无效 - 父容器加
border后，明显看到图片没贴底，底下有一条细缝 - 和文字混排时，图片“悬”在文字上方，视觉不齐
vertical-align: top 是最轻量的修复方式
适用于需保留 img 内联特性的场景，比如和文字、图标并排显示，或嵌在段落中。
关键点：
-
vertical-align只对inline和inline-block元素生效，设了display: block后它就失效了 -
vertical-align: top比middle或bottom更可靠：前者让图片上边缘对齐行框顶边，彻底避开基线计算；后两者仍依赖字体度量，响应式缩放时可能微偏 - 不要写在全局
img上，优先加类名控制，例如：.hero-img { vertical-align: top; }
display: block 是更彻底的解法
当图片是独立展示、不与文字混排（如 banner、头图、卡片主图），直接切为块级元素最干净。
优势与注意事项：
- 完全脱离行内布局，不再受
line-height、font-size、基线影响，空白从根源消失 - 无需额外声明
vertical-align，代码更少，兼容性无死角 - 副作用是它会独占一行、无法和相邻内联元素水平排列；若原有布局依赖这种行为，得同步调整父容器（比如用
display: flex重新组织） - 如果图片外层有
text-align: center，设display: block后需额外加margin: 0 auto居中
其他方案为什么不推荐
有些方法看似有效，但埋了坑：
-
font-size: 0在父容器上：能压掉空白，但会连带干掉所有子文本，必须逐个重设font-size，维护成本高 -
line-height: 0：同上，且影响行高继承，容易波及后代元素 -
overflow: hidden：靠裁剪隐藏空白，不是消除；一旦图片尺寸变化或加动画，缝隙可能重现 - 删 HTML 换行/空格：不可靠，压缩工具或模板引擎会自动加空格，上线即失效
真正要盯住的只有两点：图片是否需要内联行为？是否和其他行内元素共存？选 vertical-align: top 还是 display: block 就取决于这个判断，其余都是绕远路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
