HTML 中 <img> 默认为行内元素，其底部会预留空间以容纳下行文字的降部（descenders），导致容器内出现看似“多余”的空白；此外，.image-container 的 height: 100vh 会强制拉伸整个容器高度，进一步放大视觉上的空隙。
html 中 `` 默认为行内元素，其底部会预留空间以容纳下行文字的降部（descenders），导致容器内出现看似“多余”的空白；此外，`.image-container` 的 `height: 100vh` 会强制拉伸整个容器高度，进一步放大视觉上的空隙。
在 Web 开发中，图片下方出现“奇怪的空白”是一个高频但易被误解的问题。它并非由图片本身引起，而是由 CSS 布局机制与默认行为共同作用的结果。核心原因有两个层面：
一、<img> 的默认 display 行为
<img> 是替换型行内元素（replaced inline element），浏览器会为其基线（baseline）下方预留空间（约 3–4px），用于对齐如 g, y, p 等带降部的字母。即使图片单独存在，该间隙依然存在。
✅ 解决方式：
img {
display: block; /* 最直接有效 */
/* 或 */
vertical-align: bottom; /* 对齐基线底部，消除间隙 */
/* 或 */
font-size: 0; /* 在父容器上设置，消除行高影响 */
}⚠️ 注意：仅设 display: inline-block（如原代码所示）无法解决问题——它仍保留行内布局特性，间隙照旧。
二、.image-container 的 height: 100vh 是“隐形放大器”
原代码中：
.image-container {
height: 100vh; /* ← 关键问题！ */
display: block;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}height: 100vh 强制容器占据整个视口高度，而 <img> 默认居中对齐（因 justify-content/align-items: center 生效于 flex 容器），此时图片实际被垂直居中于一个极高容器内，其下方的“空白”实为容器剩余空间，视觉上被显著放大。
✅ 正确做法：移除冗余高度约束
.image-container {
/* 删除 height: 100vh; */
display: flex; /* 显式声明，确保 flex 行为生效 */
justify-content: center;
align-items: center;
/* height 自动由内容决定，不再撑满全屏 */
}✅ 推荐完整修复方案（精简可靠）
.image-container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/* 移除 height: 100vh */
}
.image-container img {
display: block; /* 彻底脱离行内流 */
max-width: 100%;
max-height: 100%;
opacity: 1;
transition: opacity 0.5s;
}? 验证技巧
- 打开浏览器开发者工具（F12），选中 .image-container，观察其 computed height 和 padding/margin；
- 临时添加 outline: 1px solid red 到 img，直观查看图片真实尺寸与周围空白关系；
- 检查父级是否意外设置了 line-height 或 font-size（尤其当容器含文本时）。
总结
图片下方的“奇怪空白”本质是 CSS 行内布局 + 过度容器约束 的双重副作用。优先检查两点：
① <img> 是否已设为 display: block 或合理 vertical-align；
② 包裹容器（如 .image-container）是否误用了 height: 100vh 等固定高度，导致空白被放大。
二者协同修正后，空白将自然消失，布局回归预期。
