img底部间隙源于行框基线预留空间，非margin/padding；display:block是最干净解法，vertical-align:top适用于图文混排，font-size:0或负margin属错误方案。
img 底部间隙不是 margin，改了也没用
这个间隙根本不是你写的 margin-bottom 或 padding-bottom，浏览器开发者工具里 hover img 根本不会高亮它——它属于父容器行框（line box）里基线（baseline）下方的预留空间，是 img 作为 inline 元素的默认行为。哪怕你把所有 margin/padding 设成 0，它还在。
display: block 是最干净的解法
只要图片是独立展示（比如卡片主图、banner、头图），直接切块级：
.card img {
display: block;
width: 100%;
height: auto;
}
- 彻底脱离行内布局，不依赖
font-size、line-height、基线对齐 - 不再需要配
vertical-align，代码少、兼容性稳、无副作用 - 注意：它会独占一行，如果原布局靠文字+图片混排，得同步改父容器（比如加
display: flex） - 若父容器有
text-align: center，记得补margin: 0 auto居中
vertical-align: top 适合图文混排场景
当图片必须和文字、图标并排（比如段落内插图、按钮旁图标），保留 inline 行为更合理：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.inline-img {
vertical-align: top;
}
-
top比middle或bottom更可靠：它让图片上边缘对齐行框顶边，完全绕开基线计算 - 只对
inline和inline-block生效；一旦设了display: block，这条规则就失效 - 别写在全局
img上，用类名精准控制，避免影响其他地方
font-size: 0 或负 margin 是坑，别碰
这些方案看似能“压掉”空白，但埋了维护雷：
立即学习“前端免费学习笔记（深入）”；
-
font-size: 0在父容器上：会干掉所有子文本，必须逐个重设字号，模板压缩后还可能失效 -
margin-bottom: -4px：属于硬凑，图片尺寸一变、加个 transition、换台设备，缝隙就回来 -
overflow: hidden：不是消除，是裁剪——图片稍一缩放或动画，内容就被切掉 - HTML 标签删换行/空格：上线前被构建工具自动加空格，不可靠
真正要解决的不是“怎么藏起来”，而是“为什么会有”。根源在 inline 行内格式化上下文，所以从显示模式或对齐方式入手，才稳。
