图片在列表中出现空白是因为<img>默认为inline元素，按基线对齐，预留降部空间；解决方法首选vertical-align: top/middle/bottom，其次display: block或line-height: 0（需谨慎）。
为什么图片在列表里总有一截空白
因为 <img> 默认是 inline 元素，会像文字一样对齐基线（baseline），而基线下面留有给字母「g、j、p、q、y」等降部（descender）预留的空间——哪怕图片本身没内容伸下去，浏览器也照留。这个间隙不是 margin 或 padding，是行内布局的天然行为。
用 vertical-align 直接干掉间隙
最直接有效的解法就是改 vertical-align 值，把图片拉离 baseline。常见且稳妥的取值有这几个：
-
vertical-align: top—— 对齐行框顶部，适合多图并排时高度一致的场景 -
vertical-align: middle—— 对齐父元素 x-height 中点，视觉上更居中，但注意它对的是「行内盒子的中线」，不是整个容器 -
vertical-align: bottom—— 对齐行框底部，能彻底消除下缘空白，但可能让上边留空（取决于行高） -
vertical-align: -4px（或类似负值）—— 手动微调，不推荐，换字体/字号就失效
别用 vertical-align: baseline（默认值），那正是问题源头。
display: block 更彻底，但得看场景
如果列表项里只有图片，或者你不需要它参与行内流排版，display: block 是一劳永逸的方案：图片变成块级，不再受 baseline 影响，下方空白直接消失。
立即学习“前端免费学习笔记（深入）”；
但要注意：
- 它会让图片独占一行，破坏原本的水平排列（比如
<li><img></li>里想左右并列多个图就不行） - 如果父容器是
flex或grid，display: block没副作用，可以放心用 - 旧项目里若依赖 inline 行为（比如图文混排、文字环绕），加
block后要同步调整布局逻辑
line-height: 0 在父容器上治标又治本
如果整个列表项（比如 <li>）只放一张图，没有文字，直接在 <li> 上设 line-height: 0 能清空行高带来的所有间隙，包括 baseline 空白和行距。
但风险明显：
- 一旦里面加了文字，文字会挤成一团甚至看不见（
line-height: 0让行高坍缩） - 不能用于通用组件，必须确保子内容绝对可控
- 某些字体渲染下，
line-height: 0可能导致光标定位异常（编辑场景慎用）
真正容易被忽略的是：这问题从来不是“图片有 margin”，也不是“CSS 没写好”，而是行内格式化上下文（IFC）的默认规则在起作用。改 vertical-align 是最轻量、兼容性最好、语义最干净的解法；其他方式都是在绕开 IFC，各有适用边界。
