HTML中图片下方空白间隙的真正原因是img默认为inline元素并按基线对齐，留出下降部空间；最有效修复是设置vertical-align:bottom等非baseline值。
HTML中图片下方多出空白间隙的真正原因
这不是“空格”导致的，而是 inline 元素，会像文字一样对齐基线（baseline），在行内留出下降部（descender）空间——哪怕图片后面没写任何空格或换行，这个间隙依然存在。
最直接有效的修复方式：改变 vertical-align
给 vertical-align 为非 baseline 的值即可消除间隙：
-
vertical-align: top、middle或bottom都可立即生效 - 推荐用
vertical-align: bottom，它让图片底边与父容器行盒底部对齐，视觉上最“贴底” - 注意：该属性只对
inline和table-cell元素有效，所以不能用在display: block的图片上（此时已无行内布局问题）
其他常见但容易误用的方案对比
以下方法也能“看起来”去间隙，但各有副作用：
-
display: block：彻底脱离行内流，间隙消失，但会独占一行，无法和文字并排 -
font-size: 0在父容器上：能干掉间隙，但会同时让所有子文本不可见，需对子元素单独设font-size - 删 HTML 换行/空格：无效。即使写成
-
line-height: 0：可能压缩其他行内内容，且在某些字体下仍有微小偏差
实际代码示例（推荐写法）
文字旁边放图： @@##@@ 后面还有文字。
真正要盯住的只有两点：一是确认图片是否处于行内上下文，二是优先用 vertical-align 而不是删空格或调字体大小——后者治标不治本，还容易引发新布局问题。
立即学习“前端免费学习笔记（深入）”；
