img 默认 inline 时底部空隙源于 baseline 对齐而非 margin/padding，最有效解法是 display: block；横向排列缝隙由 html 空白符引起，可用 font-size: 0 或消除换行解决；vertical-align: bottom 是图文混排时消除空隙的可靠方案。
img 默认 display:inline 导致底部 3px 空隙
这不是 margin 或 padding，而是 <img> 作为 inline 元素时，浏览器为其 descender（如字母 g、y 的下伸部分）预留的 baseline 对齐空间。哪怕父容器空无一物，这个 ≈3px 的空隙也存在；它会随 font-size 或 line-height 增大而变高。
最直接有效的解法是：img { display: block; }——它让图片退出行内格式化上下文（IFC），baseline 对齐逻辑彻底失效。
- ✅ 适用场景：轮播图、banner、
<figure></figure>中主图、flex/grid 容器里的图片——这些本就不该参与文本流 - ❌ 不适用：按钮图标、图文混排中的小图（加了会换行，文字被顶到下一行）
- ⚠️ 注意：若父容器已是
display: flex或display: grid，display: block仍生效，但纯属冗余
多个 img 横向排列时中间有缝隙
这是 HTML 换行或空格被渲染为字符间隙所致（inline/inline-block 元素间的空白符 ≈4px 宽），不是 CSS 边距问题。
推荐方案按优先级排序：
-
.img-container { font-size: 0; }+img { font-size: initial; }（如果 img 内含文字需恢复字号） - 把所有
<img>标签写在同一行，不换行、不留空格：<img src="a.jpg"><img src="b.jpg"> - 用
letter-spacing: -800px在父容器上“吞掉”空白（值负多少都行，不会重叠） - 避免用
float: left单独配display: block——浮动已过时，且需额外清除浮动
margin: 0 为什么清不掉图片周围的空隙？
因为那很可能根本不是 margin。开发者工具里看到的“空隙”，常来自以下三处：
- 父容器自带默认
margin-bottom（尤其是<p></p>，它的margin-block-end是 1em，不是margin-bottom） -
<img>标签后存在 HTML 换行或空格，在 inline 场景下被当作空白符渲染 - 图片源文件本身带透明底或未裁切（Figma/Sketch 导出 PNG 常见），CSS 无法干预，必须修图
别一上来就写 * { margin: 0; padding: 0; }——它会抹掉表单控件、列表项等原生样式，后续要手动补大量 padding，维护成本陡增。
vertical-align 是图文混排唯一靠谱的解法
当你必须保留 <img> 的 inline 特性（比如嵌在一段文字里），又想消除底部空隙，vertical-align: bottom 是目前最稳的选择。
它让图片底边贴住行框（line box）底线，不依赖文字基线，也不破坏水平流。
- 配合使用：父容器设
font-size: 0可进一步压制间隙，但要注意子元素继承问题 - 慎用
vertical-align: middle——它对齐的是整个行框中心，受line-height影响大，容易漂移 - 绝对不要用
margin-top: -3px这类魔法数字——不同字体、字号下空隙高度会变，不可靠
真正要稳，得先问一句：这张图是否必须留在文本流里？答案是否定的，display: block 就是最干净的选择；答案是肯定的，vertical-align: bottom 才是正解。空隙往往藏在父级盒模型或图片源文件里，不是 <img> 自己的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
