图片下方空隙源于img默认inline特性及baseline对齐，解决方法包括设display:block、调整vertical-align（推荐bottom）、修改line-height或font-size为0、margin-bottom负值、Flex布局等。
图片下方出现空隙，主要是因为 inline 元素，会像文字一样对齐基线（baseline），而基线和底线之间留有空间，用于容纳字母如 g、y 的下伸部分，这就导致图片下方出现“看不见的空隙”。
把图片设为块级元素
最直接有效的办法是让图片脱离行内布局流：
- 给
img添加display: block; - 如果图片在链接中（
a > img），也建议同时给a设display: block;或display: inline-block;配合对齐
调整 vertical-align 属性
若需保持 inline 行为（比如图文混排），可通过修改 vertical-align 消除空隙：
- 常用值：
vertical-align: top;、middle;、bottom; - 推荐用
vertical-align: bottom;，它会让图片底边与父容器内容区底部对齐，基本消除空隙 - 避免用
baseline（默认值）或text-bottom，它们会保留或扩大空隙
检查父容器 line-height 和 font-size
空隙大小受行高影响，尤其当父容器设置了较大的 line-height 或 font-size 时：
立即学习“前端免费学习笔记（深入）”；
- 可尝试将父容器的
line-height设为0（仅限图片独占一行时） - 或把
font-size设为0，再在子元素中重设字体大小（适合纯图标布局）
其他小技巧
某些场景下这些方法也能快速见效：
- 给
img加margin-bottom: -4px;（数值根据实际空隙微调） - 使用 Flex 布局：父容器设
display: flex;，天然消除 inline 空隙 - HTML 中删掉图片标签后的换行符（不推荐，可读性差）
不复杂但容易忽略，关键看是否需要保留 inline 特性——要混排就调 vertical-align，要干净利落就用 display: block。
