img和span旁的小缝隙源于行内元素默认按baseline对齐，而baseline略高于父容器底边；可通过vertical-align（如middle）、display:block、font-size:0或消除HTML空白符等方法解决。
为什么 img 和 span 旁边总有一条小缝隙
这是行内元素默认按 baseline 对齐导致的。浏览器把图片、文字、input 等行内元素的底部，对齐到父容器「基线」（baseline）位置，而基线其实略高于容器底边——中间那段空白就是缝隙。常见于 img 放在 div 里，或者和文字混排时底部多出几像素空白。
用 vertical-align 调整对齐基准线
直接给行内元素加 vertical-align 是最常用且有效的解法，关键不是设成 top 或 bottom，而是选对值：
-
vertical-align: middle：适用于大多数图文混排场景，视觉上更自然 -
vertical-align: top或vertical-align: bottom：适合需要严格顶/底对齐的布局，但可能破坏文字行高节奏 -
vertical-align: text-bottom：让元素底部贴合文字的底线（比baseline更低），常比bottom更精准 - 避免用
vertical-align: baseline（默认值），它正是缝隙的根源
img 标签单独处理的三个快捷方式
图片是最常出问题的行内元素，除了 vertical-align，还有更轻量的写法：
- 给
img加display: block：彻底脱离行内流，缝隙消失，但会独占一行，慎用于需与文字同行的场景 - 给
img加display: inline-block+vertical-align: middle：保留行内特性，同时可控对齐 - 父容器设
font-size: 0，子元素再重设字体大小：消除空白字符（换行/空格）产生的间隙，但会影响所有子文本，维护成本略高
别忽略父容器的 line-height 和空白符
缝隙有时不单是元素对齐问题，还受父级行高和 HTML 源码中换行符影响：
立即学习“前端免费学习笔记（深入）”；
- 如果父
div设了很大的line-height，而内部只有img，那多余高度会以「下间距」形式体现为底部空白 - HTML 中
img标签前后有换行或空格，会被渲染为一个空格字符，占据宽度并参与行内布局——压缩 HTML 或写成<img alt="HTML怎么解决行内元素底部的缝隙对齐问题" ><span>文字</span>连写可规避 -
line-height: 1或line-height: normal在多数情况下比无定义更可控
真正麻烦的不是某一种解法，而是缝隙常由多个因素叠加产生：vertical-align 没设、父容器 line-height 过大、源码里多了一个换行、还顺手写了 font-size: 14px ——这些全得一起看。调试时优先检查计算后的 line-height 值和元素实际对齐方式，而不是只盯着图片本身。
