这个问题的根本是 CSS 的垂直对齐模型导致的。
🎯 核心原理：基线对齐（Baseline）
当元素设置为 display: inline-block 时，它会参与 行内格式化上下文，而在这个上下文中，元素默认会与文本基线对齐。
.ant-image {
display: inline-block; /* 这会创建一个"行内块框" */
vertical-align: baseline; /* 默认值：与基线对齐 */
}
inline-block 元素的下边缘会与所在行的基线对齐，而不是与容器底部对齐。
假设我们有 16px 字体：
div {
font-size: 16px;
line-height: 1.5; /* 行高 24px */
}
计算过程：
行高 24px
├── 上伸部：约 5px
├── x高度：约 11px
├── 基线位置
└── 下伸部：约 8px
↑
这就是额外的 6-8px！
图片的底部对齐到基线，但基线下面还有 8px 的空间（下伸部）要保留，所以父元素就被撑高了。
🎯 一句话总结
inline-block 元素默认会与文本的"写字线"对齐，而"写字线"（基线）下方需要预留空间给字母的"小尾巴"（如 g、j、p 等字母的下伸部分），这个预留空间就造成了额外的 6px 高度。
所以可以设置 vertical-align: top、middle 或 display: block 能解决问题——前者让元素顶部对齐（不考虑基线），后者让元素脱离行内上下文（不再有基线对齐的概念）。
