图片底部空白源于img默认inline且vertical-align:baseline，为字母g/y/p的descender预留空间；解决首选vertical-align:bottom（贴行框底边）或display:block（脱离行内流）。
图片底部空白不是 margin 或 padding
它根本不是你漏写了 margin: 0 或 padding: 0 —— 即使父容器所有边距内边距都清零，空隙依然存在。这是浏览器对 <img> 的默认排版行为：它被当作行内元素（display: inline），参与文字流，必须为字母 g、y、p 等的下伸部（descender）预留空间。这个空间属于行框（line box）底层逻辑，DevTools 的盒模型里看不到，但给父容器加个背景色立马暴露。
vertical-align: bottom 是最常用解法
加这一句就能压掉空隙：img { vertical-align: bottom; }。它让图片底边直接贴住当前行框的底线，绕过 baseline 对齐。注意：
-
vertical-align: middle在不同字体下位置不稳，不推荐单独使用 -
vertical-align: text-bottom比bottom高一点，可能残留 1–2px - 在
display: flex或display: grid容器里，vertical-align完全无效——此时<img>已是 flex item / grid item，不再走行内流程
display: block 能彻底解决但有代价
img { display: block; } 让图片退出行内格式化上下文（IFC），baseline 对齐逻辑直接失效，空隙归零。但它会强制换行：
- ✅ 适合 banner、轮播图、卡片封面等独占一行的场景
- ❌ 不适合图标 + 文字按钮、
<span></span>内嵌小图——加了就断行，文字被挤到下一行 - ⚠️ 如果加了还有缝，优先检查：
<p></p>自带margin-bottom、<img>标签后 HTML 换行/空格（渲染为约 4px 空白符）、图片导出带透明底或画布留白（CSS 修不了）
真正容易被忽略的干扰源在父级盒模型里
开发者工具里看到“图片下面有空”，90% 不是 <img> 自己的问题：
- 父
<div> 或 <code><p></p>有margin-bottom或padding-bottom -
<img>后面存在 HTML 换行或空格字符（仅 inline 场景生效，但很多人加了display: block还没删掉） - 父容器
line-height过大，空隙高度 ≈ 0.25 ×line-height；临时设line-height: 0可验证，但会影响内部文字 - 图片本身导出未裁切（Figma/Sketch 常见）、带透明底——这类问题 CSS 无能为力，得重导图
