图片底部空隙源于 inline 元素的 baseline 对齐机制，预留 descender 空间导致 3–4px 间隙；display: block 最直接有效，vertical-align: bottom 适合图文混排，font-size: 0 可消除幽灵空白但有副作用。
图片底部空隙是 inline 元素的默认行为，不是 bug
浏览器把 <img> 当作行内元素处理，默认按 vertical-align: baseline 对齐，而 baseline 会为字母 g、y 等降部（descender）预留空间，导致图片底边和父容器底边之间固定留出约 3–4px 的空白。这个间隙在开发者工具里能看到 margin 和 padding 都是 0，但盒模型底部仍有一段“不可见底座”。
用 display: block 最直接有效
这是企业项目和教学实训中最常用、最稳定的解法：
-
img { display: block; }让图片脱离行内流，不再参与基线对齐，空隙立即消失 - 若需居中，配合
margin: 0 auto;即可生效（auto水平居中只对 block 元素起作用） - 注意：设为 block 后，图片无法再与文字同行显示；如需图文混排，得改用
vertical-align或float - 多个
display: block图片连续排列时，margin-bottom会发生塌陷——相邻两张图之间的实际间距取较大值，不是相加结果
vertical-align 适合必须保持 inline 的场景
当图片嵌在段落中、或需要与文字/图标水平并列时，不能用 display: block，此时优先调 vertical-align：
-
vertical-align: bottom最稳妥，让图片底边紧贴父容器底边，空隙彻底消失 -
vertical-align: middle常用于头像+文字组合，比baseline更可控 - 避免用
vertical-align: text-bottom，它仍受字体 descender 影响，效果不稳定 - 不要同时设置
margin-bottom和vertical-align，容易互相干扰；先清空所有 margin 再调对齐
父容器 font-size: 0 是个有副作用的技巧
HTML 中换行符和空格会被渲染成“幽灵空白节点”，其高度由父容器的 font-size 决定。设为 0 可消除这些空白带来的间隙：
立即学习“前端免费学习笔记（深入）”；
- 适用场景：纯图片横向排列（如轮播图、图库网格），且父容器不含需显示的文字
- 风险：子元素若继承该
font-size，文字将不可见；必须显式给文字类子元素重设字号 - 不推荐在组件化开发中使用，尤其搭配 CSS-in-JS 或嵌套组件时，容易漏掉恢复字号
真正难处理的是多层嵌套 + 响应式缩放 + flex/grid 混用的场景，这时候单靠一个 display: block 可能触发意外交互，比如破坏父容器的 align-items: center 效果——得结合容器的 display 类型和对齐逻辑整体判断。
