图片下方空白源于img默认inline导致基线对齐留白；首选display:block使其块级化消除空白；图文混排时可用vertical-align:middle/bottom等调整对齐；font-size:0或删HTML空格为辅助方案。
图片下方出现空白，本质是 inline），会与文字一样对齐基线（baseline），在父容器中留下一段“行高”留白。最直接有效的解决方式，就是让图片脱离行内布局上下文。
设置 display: block
这是最常用、最彻底的方案：让图片变成块级元素，不再参与行内格式化上下文，自然消除基线对齐带来的底部空白。
- 只需一行 CSS：
img { display: block; } - 适用于单图独立展示场景（如 banner、头图、图标等）
- 注意：设为
block后，图片默认独占一行，若需并排显示，得配合浮动、flex 或 grid 布局
调整 vertical-align 属性
如果图片必须保持 inline（比如和文字混排），可改其垂直对齐方式，避开 baseline。
- 常用值：
vertical-align: middle;、top;、bottom;或text-bottom; -
bottom能基本对齐父容器底边，消除空隙；middle视觉上更居中 - 避免用
baseline（默认值）或不设置，否则空白仍在
设置父容器 font-size: 0
行内元素间的空白，部分源于父容器的字体大小（空格、换行符被渲染为“字符间隙”）。将父容器字号设为 0，可消除这部分间隙。
立即学习“前端免费学习笔记（深入）”；
- 适用场景：图片横向排列且需紧凑贴合（如图库缩略图组）
- 记得在图片内部或后续子元素中重设
font-size，否则文字会不可见 - 示例：
.gallery { font-size: 0; } .gallery img { font-size: 14px; /* 仅示意，实际不影响 img */ }—— 注意 img 本身无文本，真正影响的是同级文字
移除 HTML 中的换行与空格
如果图片是纯 inline 布局且数量少，也可从源头精简标记结构。
- 把
- 简单但不推荐作为主方案——可维护性差，易被格式化工具破坏
- 适合内联 SVG 或图标字体等对间隙极其敏感的微小元素
基本上就这些。优先用 display: block，兼顾语义和效果；需要图文混排时，选 vertical-align 更灵活。问题不复杂，但容易忽略。
