intimetoavaid做前端这几年，如果要列一个出现频率最高、也最让人哭笑不得的 CSS 问题，img 和外层 div 底部那条缝隙绝对能排进前三。现象特别简单：一个 div 里放一张图片，干干净净，没有 margin、没有 padding，但图片下方就是有一条 2px 到 5px 不等的缝隙。有时候白底看着不明显，一旦给外层 div 加个背景色，那条缝立刻像贴纸一样扎眼。
我之前带新人时，几乎每批都会有人被这个问题卡住。它看起来简单，背后牵扯的东西却一点也不浅：行内格式化上下文、基线对齐、幽灵空白节点、行高模型……搞清楚这一条缝，等于把 CSS 里最绕的“行内布局”这关给过了。这篇文章我会从原理讲起，给你六种常规解决方案，再结合我实际排查过的各种“伪缝隙”场景，最后整理成一份可以直接抄作业的避坑清单。无论是刚入门的前端新手，还是做富文本、可视化大屏、邮件模板这类对像素有强迫症的同学，都能在里面找到能用的东西。
1. 这个缝隙到底是怎么冒出来的
1.1 先复现一下问题
代码非常简单，就是最常见的那种卡片式结构：
html复制<div class="card">
<img src="https://example.com/demo.jpg" alt="demo">
</div>
css复制.card {
background: #f5f5f5;
border: 2px solid #333;
}
.card img {
width: 100%;
height: auto;
}
这段代码放在浏览器里，你会在 img 底部看到一条大约 3px 的背景色区域，也就是缝隙。即便是 * { margin: 0; padding: 0; } 这种粗暴重置已经写好了，缝隙依然存在。这就说明缝隙不是盒模型的 margin 或 padding 造成的，问题出在更加底层的“行内布局”机制上。
我第一次遇到这个缝隙时，第一反应是给 img 加 margin-bottom: -3px，负 margin 确实能把缝隙“吃”掉，但不同字号、不同字体下缝隙大小不一样。今天能压掉，明天切个字号又露出来了，属于典型的治标不治本。后来认真翻了规范才算彻底明白，这条缝隙是“排版规则”带来的必然结果，而不是样式误设置。
1.2 根因：基线对齐与“幽灵空白节点”
要理解缝隙，需要先接受一个常识：img 默认是内联替换元素。也就是说，浏览器默认把它当作“一个特别大的文字”来处理，而不是当作一个独立的块。
这里的关键在于“当作文字处理”意味着什么。在 CSS 的行内格式化上下文里，一行内容的高度不是单纯由内容高度决定的，而是由这一行里每一个内联元素的排列方式共同决定。文字有一条我们都很熟悉的线叫“基线”，也就是字母底部那条对齐线。但除了基线，字体还有 ascender、descender 这些度量值，它们在基线以下还留有一截空间，比如 g、y、p 这些字母的下伸部分就待在那个区域。
img 这种替换元素没有自己的文字基线，规范里规定，这种情况下浏览器会把元素的底边当作基线来参与对齐。好，现在 div 里除了图片，还有一行看不见的“幽灵空白节点”，这个节点继承了父元素的 font-size 和 line-height，它也有自己的基线和 descender。图片的底边对齐到幽灵空白节点的基线上，但整行的高度又被幽灵空白节点的 descender 撑高了。于是图片底部以下，就留出了这部分 descender 高度对应的空隙。这就是缝隙的真相。
为什么 font-size 和 line-height 会影响缝隙大小？因为幽灵空白节点的 descender 高度跟字体的度量值强相关。你给父 div 设置不同的 font-size，缝隙会肉眼可见地变化，字体不同也会有细微差异，这就是负 margin 硬压方案不可靠的原因。
1.3 为什么很多框架里却看不到这个问题
很多人可能会疑惑：我用了 Bootstrap、Element 这类框架，同结构代码为什么没有缝隙？
这其实不是框架多高科技，而是框架的 reset 或 base 样式里，早就把 img 的默认 display 给改了。比如很多现代 CSS reset 里都有这么一条：
css复制img {
display: block;
max-width: 100%;
}
只要 img 从内联元素变成块级元素，它就不再参与行内布局，基线问题自然就消失了。这反过来印证了一个判断：看到缝隙时，先别急着打补丁，优先检查是不是自己项目里缺少类似的全局图片样式。如果全局把 img 设成 display: block，绝大多数缝隙场景