img底部空白是因inline元素默认vertical-align:baseline需预留descender空间，display:block最简解法；图文混排时用vertical-align:bottom更可靠；font-size:0可消除换行符间隙但需谨慎使用。
图片底部那几像素的空白不是 bug，是浏览器按文字排版规则渲染 <img> 的必然结果——它默认 inline + vertical-align: baseline，必须给 descender 留空间。直接设 display: block 最省事，但得看场景。
为什么 img 底部总有 3–4px 空白？
这不是 margin 或 padding，而是行内格式化上下文（IFC）里基线对齐的副作用：<img> 被当成一个“字符”，底边对齐父容器基线，基线下方预留了字母 “g”“y” 所需的 descender 区域。哪怕父容器没文字、font-size 很小，这个空隙依然存在，且会随 line-height 和字体变化。
常见错误现象：
- 给
<div>加红色边框后，图片没贴底，露出一条细缝 - 轮播图容器高度不精确，底部多出不可控空白
- 用
text-align: center居中图片，但图片和边框之间仍有间隙
display: block 是最稳解法，但要注意居中方式
设 display: block 后，<img> 跳出行内流，不再参与基线对齐，空白立刻消失。这是 banner、卡片图、单图展示等场景的首选。
立即学习“前端免费学习笔记（深入）”；
实操要点：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
img { display: block; }单行生效，无兼容性问题 - 想水平居中，必须用
margin: 0 auto;，text-align: center对块级元素无效 - 设为 block 后，
vertical-align失效，font-size也不再影响图片尺寸 - 如果图片要和文字并排（比如图标+文字按钮），别硬套 block，换
vertical-align
vertical-align: bottom 比 top 更可靠
当必须保留 inline 行为（图文混排、按钮内嵌图标），vertical-align 是唯一出路。但 top 在某些字体下仍可能残留 1px 偏移，middle 受 line-height 影响浮动，bottom 直接对齐行框底线，最稳定。
关键限制：
- 只对
inline或inline-block元素生效；设了display: block再写它没用 - 父容器若用了
font-size: 0，需单独给文字子元素重置字号，否则文字消失 - 多个
<img>并排时，vertical-align只解决单图底部空隙，不解决图与图之间的 HTML 换行符间隙
font-size: 0 是把双刃剑，慎用于复杂容器
父容器设 font-size: 0 能“物理抹掉”换行符和空格产生的间隙，对多图并排布局有效。但它不是治本之策——它只是让那些看不见的字符变“不可见”。
容易踩的坑：
- 容器里若有文字，必须显式给每个文字元素设
font-size，漏一个就看不见 - 响应式场景下，若用媒体查询动态改
font-size，子元素字号不会自动继承更新 - 和
rem或缩放逻辑冲突，调试成本高
真正麻烦的不是选哪个方案，而是得先分清：空隙来自单图基线对齐，还是多图间 HTML 换行符——混用解法会让问题更难定位。
