当为图片容器设置 height: 100% 时，常因图片默认为内联元素（inline）产生底部空白，导致父 div 实际高度大于图片本身；本文提供简洁可靠的 CSS 修复方案，并适配 WordPress Divi 等主题环境。
当为图片容器设置 `height: 100%` 时，常因图片默认为内联元素（inline）产生底部空白，导致父 div 实际高度大于图片本身；本文提供简洁可靠的 css 修复方案，并适配 wordpress divi 等主题环境。
在使用 CSS Grid 构建响应式图文交错布局（如 Divi 主题中的“Z 形网格”）时，一个常见却易被忽视的问题是：设置了 height: 100% 的图片容器（如 .grid-img-1）实际高度总略大于其子 元素，从而破坏网格对齐、影响视觉节奏——正如你在 Inspector 中观察到的“底部多余空白”。
根本原因在于：HTML 中 默认是 display: inline 元素，会像文字一样参与行内格式化上下文（inline formatting context），其基线（baseline）默认与父容器文本行底对齐，下方会预留约 4px 的空间（用于容纳字母如 g、y 的下伸部分）。即使父容器高度设为 100%，该空白仍存在，且不受 margin: 0 或 padding: 0 影响。
✅ 正确解决方案非常简洁，只需三行 CSS，无需 JavaScript，完全兼容 WordPress Divi 的「附加 CSS」功能：
/* 推荐：一劳永逸修复所有 grid 图片容器 */
.grid-container img {
display: block; /* 关键：脱离行内上下文，消除 baseline 空白 */
width: 100%; /* 拉满宽度，保持响应式 */
height: 100%; /* 高度严格匹配父容器 */
object-fit: cover; /* 可选：确保图片填满且不拉伸变形（推荐） */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
不要仅对父容器设 height: 100%：.grid-img-1 { height: 100% } 无效，因为其父 .grid-container 是 Grid 容器，子项高度由 Grid 轨道决定，而非继承；真正需约束的是
自身。
- 避免使用 vertical-align: bottom 替代 display: block：虽可临时隐藏空白，但未根除问题，在复杂嵌套或字体变化时可能复现；display: block 是语义清晰、稳定可靠的现代解法。
-
确保父容器有明确高度来源：你的 .grid-container 已通过 grid-template-rows: repeat(2, 50%) 定义了行高，因此 height: 100% 在
上能正确解析。若父容器高度依赖内容（如 height: auto），则需额外设定（如 min-height 或 aspect-ratio）。
- Divi 用户实操提示：将上述 CSS 粘贴至 WordPress 后台 → 外观 → 自定义 → 附加 CSS 即可生效，无需修改 PHP 或 JS；建议添加注释便于后续维护。
? 进阶建议（提升体验）： 若图片原始宽高比与网格单元不一致，可配合 object-fit: cover（裁剪填充）或 object-fit: contain（等比缩放留白）优化显示效果；亦可为 .grid-container 添加 gap: 0 确保无意外间距干扰 Z 字形对齐。
综上，该问题本质是 CSS 行内渲染机制的典型表现，而非框架或主题缺陷。一行 display: block 即可优雅解决，兼顾性能、可维护性与跨浏览器兼容性——在 Divi 等可视化构建器中，正是这类底层 CSS 知识，让定制化设计真正可控、精准、高效。
