img底部空隙源于baseline对齐预留的descender空间（≈3–5px），非margin；解决方法：图文混排用vertical-align: bottom，单图布局用display: block，横向排列缝隙则需font-size: 0或消除html空白符。
img底部空隙不是margin，是baseline对齐残留空间
浏览器把<img>当文字处理，默认vertical-align: baseline，强制预留 descender 空间（给字母 g/y 下伸部分），哪怕父容器空无一物，这个 ≈3–5px 的空隙也存在。它不占 box model 的 margin/padding，开发者工具里 inspect 不到，但加个background-color立刻暴露。
vertical-align: bottom 是图文混排唯一可靠解法
保留<img>的 inline 特性时，vertical-align: bottom让图片底边直接贴住行框（line box）底线，绕过 baseline 对齐逻辑：
- 比
middle稳定——middle依赖 x-height，换字体/字号就偏移 - 比
text-bottom更彻底——后者仍可能残留 1–2px - 在
flex或grid容器中无效——此时图片已是 flex item / grid item，不走行内流程 - 若父容器
line-height很大（如line-height: 2），空隙会被放大；需同步控制父级行高或临时加font-size: 0
display: block 是最彻底但有场景限制的方案
img { display: block; }让图片退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效，空隙归零：
- ✅ 适合 banner、轮播图、
<figure></figure>主图、flex/grid 容器里的图片——这些本就不该参与文本流 - ❌ 不适用图文混排中的小图标——加了会强制换行，文字被顶到下一行
- ⚠️ 若父容器已是
display: flex或display: grid，这句纯属冗余，间隙本就不存在 - ⚠️ 加了还有缝？先查三处：
<p></p>自带margin-block-end、<img>标签后 HTML 换行/空格、图片导出带透明底或未裁切
横向排列图片间的缝隙来自HTML空白符，不是CSS边距
多个<img>写在不同行或中间有空格，HTML 解析器会把换行/空格渲染为一个“文字级”空白（≈4px），和margin无关：
- 首选：
.container { font-size: 0; }+img { font-size: initial; }（若 img 内含文字需恢复字号） - 次选：HTML 标签写在同一行，不留换行与空格：
<img src="a.jpg"><img src="b.jpg"> - 慎用
letter-spacing: -800px——值负多少都行，但影响可访问性，且嵌套深时易失效 - 避免
float: left+display: block——浮动已过时，还需额外清除浮动
真正容易被忽略的是：空隙常不在<img>上，而在它的上下文里——<p></p>的默认外边距、HTML 换行符、图片源文件自带透明画布，这些都比改 CSS 更优先排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
