CSS图片底部缝隙排查：从基线原理到六种解法

做前端这些年，要说最容易被当成“玄学”的CSS问题，img与外层div底部有缝隙绝对排得上号。明明没有padding、没有margin，border也清零了，div也没有额外高度，图片底边和div底边之间就是会露出一条缝。这条缝少则1px，多则3px到5px，一旦外层背景色比较深，图片底部就像被垫了一条细线，产品截图里特别明显。很多人第一反应是“给div加overflow:hidden”，结果换个人、换个浏览器，缝又冒出来了。其实这不是盒模型的问题，而是CSS内联格式化上下文里的基线（baseline）在作怪。这篇文章我会从最小复现开始，把缝隙的原理、六种解决方案、排查思路、特殊场景处理一次性讲透，适合所有被这个“小问题”劝退过的前端开发者。

1. 先复现：这个缝隙到底长什么样

1.1 最小复现代码

先给一个最干净的HTML。不引入任何UI库，不写复杂的嵌套：

html复制<div class="wrapper">
  <img src="https://example.com/demo.jpg" alt="demo">
</div>

CSS部分尽量保持极简：

css复制* {
  margin: 0;
  padding: 0;
  border: 0;
}
.wrapper {
  background: #2c3e50;
}
.wrapper img {
  width: 240px;
}

这个代码在当前浏览器里跑一下，肉眼就能看到：img左侧和上侧贴着div，但底部总是有一小块深色背景露出来。如果是浅色背景或者图片本身是白底，这个缝隙不容易发现；一旦背景换成深色，或者给div加了一个底边框，问题就变得扎眼。我自己在写组件库示例时经常先看到这种“多出1px”的问题，第一反应是检查全局样式，后来发现即使清空margin和padding也于事无补。

这里的关键点是：div的height并不是240px，而是大约242px或者245px，多出来的高度取决于当前容器的字体大小和字体度量。如果你把div的font-size设为0，div高度会变回240px；如果你什么都不改，只是把img从inline改成block，div高度也变回240px。所以它会随着环境变化，这也是很多人觉得“有时没有有时有”的原因。

1.2 缝隙来自内联元素的“基线”

要理解根因，得回到排版最基础的概念：基线。文本排版时，一行字母并不是按每个字符的最低点对齐，而是按同一条基线对齐。这条基线在英文字母x底部下方一点，而在字母g、j、y这些有下伸部的字母底部上方。为了不让下伸部刺破行框，行框底部会在基线之下额外预留一段空间，这段空间叫做descent（下行空间）。

img虽然是一张图片，但只要它是inline元素，它就要参与一个内联格式化上下文（IFC），并且默认vertical-align: baseline。也就是说，图片的底边会被放在这条基线上，而基线下方还要给可能存在的字母下伸部留位置。于是div的底边并不是紧贴图片底边，而是紧贴行框底部，二者之间就多出了“预留空间”。这就像你在一张纸上画了一条文字线，然后把一张照片底边压在这条线上，照片下面还有一小半行高的空白，线框就是按照整行文字的高度画的。

如果img设置了display:block，它就退出了inline上下文，不再有基线对齐问题。如果设置vertical-align: bottom，图片底边会直接贴到行框底部，这段下行空间被从视觉上挪走，缝隙也就看不见了。

1.3 为什么时有时无、时大时小

项目里看到的现象往往是：同一个页面，有的图片有缝，有的没有。最容易出现的变量是父元素的font-size和line-height。比如全局reset里写了html { font-size: 16px; line-height: 1.5; }，那么普通div的line-height一般是24px。行框比字体的内容区高出一截，多出来的半行距主要分布在基线下方，给图片留出的“垫脚”空间就接近几px。如果某个局部容器把font-size改成14px、line-height改成1.2，缝隙可能又变小了。

字体本身也会影响。同样的font-size，Arial和微软雅黑的ascent、descent数值不一样，所以在不同操作系统、不同浏览器下，缝隙高度可能不同。甚至同一台机器，换一个字体族，缝宽也会变。这也是为什么有时你用别人提供的代码片段，在自己电脑上看到的效果和对方不一样。理解了这一点，你就知道应该从排版根源去解决，而不是用“写死3px”这种土办法。

2. 根因深挖：为什么是几像素，而不是内边距

2.1 行高与字体度量

要搞清楚这个缝隙到底怎么算出来的，需要看行高和字体度量。字体文件内部会定义ascent和descent两个关键度量值：ascent决定字母最高点到基线的距离，descent决定字母最低点（包括g