做前端这么多年，如果让我挑一个看起来不起眼、但能让新手和老手都挠头的经典问题，“图片底部默认有空白缝隙”绝对排得进前三。你明明没给图片加任何 margin 和 padding，父容器也没有多余空间，可图片下方就是死死贴着一条几像素到十几像素不等的空隙，换浏览器、换机型都还在。这个 bug 看起来神秘，其实就是 CSS 排版机制里一个非常基础的知识盲区。这篇文章我把来龙去脉、五种解决方案、以及藏在“为什么”背后的原理一次说透，读完你不仅能随手修掉，还能给同事把原理讲明白。
1. 图片底部缝隙到底从哪来的：先说排版机制，再谈解决方案
1.1 图片是 inline 元素，这才是问题的源头
大多数人第一次遇到图片底部缝隙时，第一反应是检查 margin、padding、border，结果全部为零，问题却依然存在。这时候问题不在图片本身，而在图片的“身份”——默认情况下，img属于 inline 元素，也就是行内元素。
inline 元素在 CSS 排版时走的是“行内格式化上下文”那一套规则，这套规则的核心是：一行内容里所有元素要在一个水平基线上对齐。你可以把一行内容想象成一排站在地面上的小人，大家脚底踩着同一条线，这条线就是基线（baseline）。正常情况下，基线是无处不在的，文本、图片、输入框，只要作为 inline 元素混在一行里，最终都要按这条基线对齐。
这里有个非常关键的细节：对于文本元素，基线是字母底部那根线；但对于图片这类“替换元素”，它没有自己的基线规则，CSS 会默认把图片的底部边缘当作基线。于是当图片和文字混排时，图片底边会死死对齐文本的基线，而文本的基线并不是容器的最底部，基线的下方还有字母的下伸部分和行高撑出来的空间。图片底下那条“诡异的缝隙”，就是基线下方的这段下沉空间。
1.2 缝隙大小取决于什么：line-height、font-size 和字体的配合
既然缝隙本质上来自文字排版占用的空间，那它的大小就不是固定的，而是由父容器的line-height、font-size，甚至字体本身的度量决定。
举个例子，假如父容器设置了font-size: 16px且没有显式设置line-height，浏览器会采用默认的line-height: normal，这个值在不同浏览器里大约是 1.2 到 1.4 倍字号。16px 的字乘以 1.4 倍，行高约等于 22.4px，而一行文字的 baseline 之下还留出了一部分空间，这部分就是缝隙的“主成分”，通常几像素到十几像素不等。
更麻烦的是，这个值还会随字体变化。中文字体和英文字体的度量不同，某些字体下基线位置会偏高或偏低，所以同样一段代码，换一个字体族，缝隙大小肉眼可见地变化。遇到这种情况，靠“调一个固定像素值”去修复是没有通用性的，正确方向是从布局机制上消除产生缝隙的根源。
2. 从根源拆解：为什么这些解决方案能起效
2.1 display: block 让图片脱离“行内世界”
既然问题出在图片是 inline 元素、参与行内排版，那最直接的思路就是改变图片的盒子类型，让它不再参与行内的基线对齐。display: block会把图片变为块级元素，块级元素在排版时不关心基线，直接独立占一行，自然也就不会在底部产生文字下沉空间。
这个方案之所以经典，是因为它绕过了整个行内格式化上下文，是一劳永逸的解法。配合.img { display: block; }一条规则，图片就彻底不再受父级字体、行高的牵扯。缺点也比较明显：图片变块级后会默认占满父容器宽度，如果原图比容器窄，即使加上width和height也需要小心保持比例，所以使用场景上需要额外考虑布局需求。
2.2 vertical-align 改变对齐参照物
如果你确实需要图片保持 inline 属性，比如一行里要图片和文字混排，那就需要调整图片的垂直对齐方式。vertical-align的默认值是baseline，也就是前面说的罪魁祸首；当把它改成bottom或middle时，图片的底部就不会再去追文本的基线，而是对齐到整行盒子（line box）的底部边缘。
这也是非常常见的修复手段。具体到场景里，vertical-align: bottom直接消除底部间隙；vertical-align: middle也能把图片整体抬高，让底部落在中线附近，视觉上同样看不到缝隙。这里涉及一个常见误区：有些人以为vertical-align是相对父容器对齐，实际上它的对齐参照物是所在行的行盒（line box），理解这一点，才能解释为什么一行里有一个大图片时，其他文字会跟着大幅度错位。
2.3 line-height 和 font-size 清零，是“釜底抽薪”的思路
第三个思路是改父容器，从源头取消文字排版对这个行盒高度的贡献。只要父容器的line-height: 0或font-size: 0，行内格式化上下文就不会再生成向下的文字空间，图片底部的缝隙自然就消失了。
line-height: 0的原理是：行内元素参与行盒的高度计算时，行高为 0 会直接把基线以下的空间压平。font-size: 0更狠，直接把字体大小清零，字号没了，基线相关的留白也就没了。但这两个做法都有副作用：如果容器内还有其他需要显示的文本，文字会变得不可见或重叠，所以它们只适合容器里只有图片的“纯图容器”场景。
3. 实战：五种解决方案逐一操作，附代码与选型建议
3.1 方案一：给图片设置 display: block
.img-block { display: block; /* 如果原图比例异常，可以用下面两行保持比例约束宽度 */ max-width: 100%; height: auto; }这是最通用、最值得优先尝试的方案，适合绝大多数“图片独占一段”的布局。比如轮播图、商品大图、banner，只要图片自身作为独立内容，用了display: block基本一劳永逸。
在组件化项目里，也经常会直接写一个全局类，比如.img-responsive { display: block; max-width: 100%; height: auto; }一次性处理图片底部缝隙和响应式缩放两个问题。
3.2 方案二：调整 vertical-align 为 bottom / middle
.container img { vertical-align: bottom; }这个方案适合图片需要和其他 inline 元素（比如文字、小图标）混排的场景，比如头像后面跟着昵称、图标后面跟着文字。此时图片本身的 inline 属性必须保留，那就让它对齐到行盒底部，它占据的行内空间里，基线下方的那一段空白就不会出现在图片底部了。
- 视觉上图片和下一行文字之间没有多余空白，间距完全由 margin 控制。
- 想更稳妥连字体基线相关的大小都不参与，可以和父容器
line-height: 0连用，后面单说。
3.3 方案三：父容器 line-height: 0
.img-wrapper { line-height: 0; /* 通常还会配合 font-size: 0 使用，双保险 */ font-size: 0; } .img-wrapper img { width: 100%; height: auto; }这个方案适合容器里只有图片时。我自己在封装一个纯图片居中容器（比如头像裁剪预览框）时，特别爱用这个组合：
line-height: 0压平行高留白；font-size: 0进一步确保任何继承下来的字号都不会贡献基线空间。
两个配合起来，图片底部的缝隙就彻底没有了。缺点是容器里一旦出现文字，文字就会因字号为 0 而看不见，所以只能用于纯图容器。
3.4 方案四：font-size: 0
.img-container { font-size: 0; } .img-container img { vertical-align: middle; }如果你是做图片轮播、宫格布局，里面可能还嵌套着其他组件，有时不方便动 line-height，那单独用font-size: 0也能消除大部分缝隙。这时图片的vertical-align: middle会让图片在行盒内垂直居中，底部不再紧贴基线，缝隙自然消失。
我试了多年场景总结下来，font-size: 0 单独用对付这个缝隙足够，实在不放心再把line-height: 0加上。这里要注意：如果父容器里还有需要显示的文案，不要用 font-size: 0，而是用百分比字号或 rem 重设文字大小。
3.5 方案五：用 flex / grid 容器包裹图片
flex和grid布局下，子项会自动变成块级化（blockification），根本不会进入行内格式化上下文，所以图片底部缝隙天然不存在。这是现代项目里最优雅的解法。
.img-flex-wrapper { display: flex; align-items: center; justify-content: center; } .img-flex-wrapper img { /* 图片在 flex 容器里不受基线影响，但宽度还是可以控制 */ max-width: 100%; height: auto; }这种做法没有副作用：容器里即使还有文字，也只是普通 flex 子项，不会影响图片的间距。轮播图、卡片头图、混合排版的栅格都可以用。唯一要注意的是 flex 会让子元素默认的flex-shrink: 1生效，如果图片特别大，记得加flex-shrink: 0防止被压缩。
3.6 五种方案怎么选，直接抄这张表
| 方案 | 适用场景 | 副作用 | 推荐指数 |
|---|---|---|---|
| display: block | 图片独立占位、响应式图、轮播 | 图片变成块级并占满宽度，需配合宽度控制 | 五星 |
| vertical-align: bottom/middle | 图片与文字、图标混排 | 影响同一行内其他元素的对齐关系 | 四星 |
| line-height: 0 | 纯图容器、头像框、图片包裹器 | 容器内文字不可正常显示 | 四星 |
| font-size: 0 | 图片宫格、多图容器 | 容器内文字字号被清零，需重设文字样式 | 三星半 |
| flex / grid | 现代布局、卡片图、混合排版 | 子元素块级化，需注意 flex 缩放行为 | 五星 |
4. 场景细节：组件化框架、响应式、嵌套布局里的坑
4.1 在组件化框架（如 Vue / React）里处理图片缝隙
前端工程化之后，我们很少直接手写原始 HTML 页面，图片多数出现在组件模板里。在 Vue 单文件组件或 JSX 中，这个 bug 一样会存在，因为最终渲染到浏览器里，img 的默认行为并没有变。
在组件里我的习惯是给通用图片组件加一个display: block的根样式，这样所有通过组件输出的图片默认就不会有缝隙：
<template> <img class="app-img" :src="src" :alt="alt" /> </template> <style scoped> .app-img { display: block; max-width: 100%; height: auto; } </style>遇到一个父容器里有图片又有文字的复杂场景，比如用户卡片，图是头像、文字是昵称，这种情况我会给头像加vertical-align: middle，因为需要它和其他文字在同一个行内上下文里对齐。组件化场景下最容易犯的错是：全局样式已经给 img 加了 display: block，但某些组件内的 inline 布局期望它保持原本行为，导致样式冲突。所以团队规范里最好明确：全局统一设 display: block，特殊混排场景用组件局部覆盖。
4.2 响应式场景中的注意事项
响应式布局里，图片通常会设置max-width: 100%和height: auto，这时缝隙问题如果同时发生，会显得更扎眼，因为图片在不同宽度下高度变化，缝隙百分比看起来也在变。
这个场景我建议优先使用display: block加max-width: 100%的组合，因为响应式图片基本不会一行里同时混排文字。如果确实需要图片和标题、简介混排，比如新闻列表，缩略图一侧是文字，另一侧是图片，那就用vertical-align: middle或者直接给外层容器上 flex，一了百了，两个方向都对齐，不用精确计算字体带来的偏移。
4.3 不只是图片，音频封面、视频缩略图、svg 也会遇到
这个 bug 并不局限于img标签。video标签的默认播放器出现前，视频缩略图用 cover 方式渲染时同样会有底部缝隙；svg设为 inline 或插在文字流里时也可能出现；甚至canvas作为 inline 元素也会继承同样的特性。排查时可以发散一下：凡是“替换元素”或行内元素，默认 vertical-align 为 baseline，就有可能出现这一现象，排查思路是通用的。
4.4 从“缝隙”到“间距”：结合其他布局方式
还有一种常见情况：图片本身没有缝隙，但图片后面紧跟的是段落文字，开发者在图片上设置了margin-bottom，忘了容器有默认字体行高，导致实际间距比预想多出半个行高。判断方法很简单：把图片的 margin 全部清零，如果仍然有空白，说明是行内排版缝隙；如果空白消失了，说明纯粹是 margin 控制不当。
5. 排查思路、速查表与避坑清单
5.1 三步定位问题到底在不在“垂直方向”
每次遇到图片底部空白，建议按这个顺序排查：
- 打开浏览器 F12，选中图片，看图片盒模型的 margin、padding、border 是否是零；再往上选中父容器，看父容器的 padding 是否有额外值
- 确认父容器的
line-height和font-size有没有显式设置，尤其是继承来的值 - 全局搜一下是否有库或框架重置样式涉及 img 的 display / vertical-align，覆盖情况是否生效
如果以上三点都没有显式问题，那几乎可以肯定是 inline + baseline 的默认排版行为导致的。顺手在样式面板里临时给图片加display: block或vertical-align: bottom试试，缝隙当场消失，就实锤了。
5.2 常见问题速查表
| 现象 | 可能原因 | 优先方案 |
|---|---|---|
| 图片下方几条到十几条像素的空白 | img 默认 inline，baseline 对齐产生向下空隙 | display: block 或 vertical-align: bottom |
| 空白大小随父容器字号变化 | 字号影响 line-height 和基线位置 | font-size: 0 或 line-height: 0 |
| 图片处于轮播图中，每张图空隙位置一致但间隙明显 | img 未脱离行内排版 | 外层布局改 flex，或 img 统一 display: block |
| 图片旁边混排文字时图片错位 | inline 元素对齐方式不对 | vertical-align: middle/bottom |
| 设置了 margin-bottom 但间距看起来比预期大 | margin 之外还叠加了行内间隙 | 先消除缝隙，再统一用 margin 控制间距 |
| 图片在 flex 容器里居然还有底部空隙 | flex 容器另套了一个块级容器，图片在块级容器内仍为 inline | 给最内层 img 单独加 display: block |
5.3 实战避坑：全局重置可以这样做，但要小心影响范围
如果你想在项目里一次性解决，可以在全局样式中加入：
img { display: block; max-width: 100%; height: auto; }这是非常有效的全局兜底，但要注意：并不是所有项目都希望所有图片都变成块级。有些场景比如“图标加文字”的 button、avatar 加 status 点，需要 inline 布局，这时全局规则反而会改变布局预期。更稳妥的做法是全局只重置纵向对齐相关的兜底：
img { vertical-align: bottom; }这样不会改变图片是否占一行的布局行为，却能确保任何 inline 环境下图片都不受基线下方空白影响。对于绝大多数博客、后台系统、商城页面来说，这个全局规则加完，基本再也不用逐处处理图片底部缝隙了。
我个人的习惯是：团队项目里全局加img { vertical-align: bottom; }，个别需要混排文字的场景按需求覆盖为 middle 或 top；纯图布局顺手加 display: block；框架组件里的图片走通用组件类。这套组合在实际项目里跑了几年，几乎没有再因为图片底部空白返工过。最后再分享一个调试小技巧：遇到难以判断来源的空白，给图片临时加上outline: 1px solid red，再用 DevTools 的布局面板看盒模型，图片占位框一目了然，比反复猜快得多。
