图片下方空隙源于img默认inline导致的baseline对齐；解决方法包括：①display:block；②inline-block+vertical-align:top/bottom；③父元素line-height:0或font-size:0；④flex布局；⑤消除HTML空白符。
图片下方出现空隙，主要是因为 <img> 默认是 行内元素（inline），会像文字一样对齐基线（baseline），而基线与行框底部之间留有空间，用来容纳英文的 descender（如 g、j、p 的下延部分），所以图片下方看起来有一段“空白”。
把图片设为块级元素
最直接有效的办法是让图片脱离行内布局上下文：
- 给
img添加display: block;—— 图片独占一行，不再参与基线对齐，空隙立即消失 - 若需保持水平排列（比如图+文字同行），可改用
display: inline-block;，再配合vertical-align调整对齐方式
调整 vertical-align 属性
当图片保持 inline 或 inline-block 时，vertical-align 控制它在行框中的垂直位置：
-
vertical-align: bottom;或top;或middle;都能消除默认 baseline 带来的空隙 - 推荐用
vertical-align: top;或bottom;，语义明确且兼容性好 - 注意：
vertical-align只对 inline / inline-block 元素生效，对 block 无效
检查父容器 line-height 和 font-size
空隙大小其实受父元素的 line-height 和 font-size 影响（因为 baseline 对齐依赖行高）：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器设置了很大的
line-height，空隙会更明显 - 临时解决：给图片父元素设置
line-height: 0;，再给内部文字单独设行高 - 或把父容器
font-size: 0;（适合纯图片容器），再给子元素重置字体大小
其他实用小技巧
遇到特殊情况可尝试这些方法：
- 给
img设置margin-bottom: -4px;（数值依情况微调），快速视觉修复 - 使用 Flex 布局：父容器设
display: flex;，图片自动顶部对齐，空隙自然消失 - 避免在
img标签后换行或写空格——HTML 中的空白符会被渲染为一个空格，也可能造成间隙
