HTML中图片下方空白间隙的真正原因是img默认为inline元素并按基线对齐，留出下降部空间；最有效修复是设置vertical-align:bottom等非baseline值。
HTML中图片下方多出空白间隙的真正原因
这不是“空格”导致的，而是 <img alt="HTML5空格导致图片偏移怎么修_图片偏移的空格调整技巧【解答】" > 默认为 inline 元素，会像文字一样对齐基线（baseline），在行内留出下降部（descender）空间——哪怕图片后面没写任何空格或换行，这个间隙依然存在。
最直接有效的修复方式：改变 vertical-align
给 <img alt="HTML5空格导致图片偏移怎么修_图片偏移的空格调整技巧【解答】" > 设置 vertical-align 为非 baseline 的值即可消除间隙：
-
vertical-align: top、middle或bottom都可立即生效 - 推荐用
vertical-align: bottom，它让图片底边与父容器行盒底部对齐，视觉上最“贴底” - 注意：该属性只对
inline和table-cell元素有效，所以不能用在display: block的图片上（此时已无行内布局问题）
其他常见但容易误用的方案对比
以下方法也能“看起来”去间隙，但各有副作用：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
display: block：彻底脱离行内流，间隙消失，但会独占一行，无法和文字并排 -
font-size: 0在父容器上：能干掉间隙，但会同时让所有子文本不可见，需对子元素单独设font-size - 删 HTML 换行/空格：无效。即使写成
<div><img src="a.jpg" alt="HTML5空格导致图片偏移怎么修_图片偏移的空格调整技巧【解答】" ></div>紧凑格式，间隙仍在 -
line-height: 0：可能压缩其他行内内容，且在某些字体下仍有微小偏差
实际代码示例（推荐写法）
<style>
img.fix-gap {
vertical-align: bottom;
}
</style>
<div>
文字旁边放图：
<img class="fix-gap" src="icon.png" style="max-width:90%" style="max-width:90%" alt="HTML5空格导致图片偏移怎么修_图片偏移的空格调整技巧【解答】" >
后面还有文字。
</div>
真正要盯住的只有两点：一是确认图片是否处于行内上下文，二是优先用 vertical-align 而不是删空格或调字体大小——后者治标不治本，还容易引发新布局问题。
立即学习“前端免费学习笔记（深入）”；
