图片下方空白源于img默认vertical-align:baseline，浏览器为字母下伸部分预留空间所致；解决方法是设vertical-align:bottom或display:block。
图片下方为什么总有空白？vertical-align 默认值是罪魁祸首
图片作为 <img alt="CSS如何解决图片下方多余间隙_调整vertical-align与盒模型" > 元素，默认是 inline 级别，会像文字一样参与行内格式化。它的 vertical-align 默认值是 baseline —— 也就是对齐到父容器中“基线”位置，而基线以下还留着给字母如 g、y 的下伸部分（descender）预留空间。图片本身没下伸内容，但浏览器照旧留空，就表现为图片下方那条看不见却删不掉的缝隙。
- 这个间隙不是 margin 或 padding，
inspect看不到，但box-sizing: border-box也拦不住它 - 只在
display: inline或inline-block时出现；设成block就直接消失 -
font-size: 0在父容器上能压掉间隙，但可能影响内部其他文字，慎用
最稳的解法：改 vertical-align 或 display
两种主流方案，适用场景不同，别硬套：
- 想保留图片行内布局（比如和文字混排），把
vertical-align改成top、middle或bottom：img { vertical-align: bottom; }推荐bottom，兼容性好，视觉上最接近“贴底”直觉 - 图片独立占行、不需要和文字对齐，直接设
display: block—— 这是最彻底的解法，一劳永逸，且避免了 inline 盒模型带来的各种隐式行为 - 如果用了
flex或grid布局，间隙天然不存在，因为图片已脱离行内上下文
flex 布局里为什么没这问题？盒模型层级变了
一旦父容器设了 display: flex，子元素（包括 <img alt="CSS如何解决图片下方多余间隙_调整vertical-align与盒模型" >）自动变成 flex item，不再走 inline 渲染流程。vertical-align 对 flex item 完全无效，浏览器也不再为它预留 descender 空间。
- 此时图片的对齐靠
align-items或align-self控制，和 baseline 无关 - 但要注意：如果图片是
flex容器里的唯一子项，又没设高度，它仍可能因默认align-items: stretch被拉伸 —— 这是另一个问题，和底部间隙无关 - 别误以为 “加了 flex 就万事大吉”，如果父容器是
inline-flex，且外层还有文字，间隙可能以别的形式重现
那些看似有效但藏坑的写法
有些方案短期看着行，长期维护容易翻车：
立即学习“前端免费学习笔记（深入）”；
-
line-height: 0在父元素上：确实能干掉间隙，但若父容器里还有文字，line-height归零会让文字挤成一团，得额外重置子元素line-height -
font-size: 0同理，影响所有继承文字，且在 rem/em 场景下可能干扰缩放逻辑 - 给图片设
margin-bottom: -4px：依赖具体像素值，换字体、换字号、换浏览器渲染都可能失效，属于“修 bug 的 bug”
真正要盯住的，其实是图片所处的上下文 —— 它是不是还在行内流里？有没有被更高层的布局模式接管？间隙从来不是图片的问题，是浏览器按规范走流程时留下的自然痕迹。
