为什么图片下方会出现意外的空白？

HTML 中 默认为行内元素，其底部会预留空间以容纳下行文字的降部（descenders），导致容器内出现看似“多余”的空白；此外，.image-container 的 height: 100vh 会强制拉伸整个容器高度，进一步放大视觉上的空隙。

html 中 `` 默认为行内元素，其底部会预留空间以容纳下行文字的降部（descenders），导致容器内出现看似“多余”的空白；此外，`.image-container` 的 `height: 100vh` 会强制拉伸整个容器高度，进一步放大视觉上的空隙。

在 Web 开发中，图片下方出现“奇怪的空白”是一个高频但易被误解的问题。它并非由图片本身引起，而是由 CSS 布局机制与默认行为共同作用的结果。核心原因有两个层面：

一、 的默认 display 行为

是替换型行内元素（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 强制容器占据整个视口高度，而 默认居中对齐（因 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 行内布局 + 过度容器约束 的双重副作用。优先检查两点：
① 是否已设为 display: block 或合理 vertical-align；
② 包裹容器（如 .image-container）是否误用了 height: 100vh 等固定高度，导致空白被放大。
二者协同修正后，空白将自然消失，布局回归预期。