本文详解如何消除 Grid 布局中 元素父容器（如 div）因行内元素默认基线对齐导致的底部空白，通过 display: block、vertical-align 或 font-size: 0 等核心方法实现子元素精准撑满，确保 Zigzag 图文网格视觉对齐。
本文详解如何消除 grid 布局中 `` 元素父容器（如 `div`）因行内元素默认基线对齐导致的底部空白，通过 `display: block`、`vertical-align` 或 `font-size: 0` 等核心方法实现子元素精准撑满，确保 zigzag 图文网格视觉对齐。
在使用 Divi 构建响应式图文网格（如 Zigzag 布局）时，你可能会遇到一个经典但易被忽视的 CSS 问题：明明给图片设置了 width: 100%; height: 100%，其父 div 却仍比图片高几像素，导致网格错位、留白不均。这种现象并非 height: 100% 失效，而是源于 的默认显示行为——它是一个行内替换元素（inline replaced element），浏览器会为其预留用于容纳字母降部（descenders，如 g, y, p 下伸部分）的空白空间，表现为容器底部不可见的“间隙”。
该问题与父容器是否设 height: 100%、margin/padding: 0 或 box-sizing: border-box 无关；即使所有样式看似正确，间隙依然存在。下面提供三种经过验证、兼容性好且适用于 WordPress + Divi 场景的解决方案：
✅ 方案一：强制图片为块级元素（推荐首选）
最简洁、语义清晰、无副作用的方法是将 设为 display: block，彻底脱离行内流布局上下文：
.grid-container img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 可选：保持宽高比并填满容器 */
}? 为什么有效？
display: block 让图片不再参与文本行布局，自然消除了基线对齐带来的底部间隙。同时 width/height: 100% 能可靠生效（前提是父容器有明确高度，你的 .grid-container 已通过 grid-template-rows 定义了行高，完全满足条件）。立即学习“前端免费学习笔记（深入）”；
✅ 方案二：调整垂直对齐方式（适合需保留行内特性的场景）
若因特殊需求必须保持 img 为行内元素（例如配合文字环绕），可改用 vertical-align：
.grid-container img {
vertical-align: top; /* 或 middle / bottom */
width: 100%;
height: 100%;
}vertical-align: top 将图片顶端与父容器行框顶部对齐，同样规避了基线对齐逻辑，从而消除底部空隙。
✅ 方案三：重置父容器字体大小（备用方案）
在极少数嵌套复杂或继承干扰严重的情况下，可在图片父 div 上设置 font-size: 0，从根源上移除行高计算依据：
.grid-img-1, .grid-img-2, .grid-img-3, .grid-img-4 {
font-size: 0; /* 消除行内元素行高依赖 */
}
.grid-img-1 img,
.grid-img-2 img,
.grid-img-3 img,
.grid-img-4 img {
width: 100%;
height: 100%;
display: block; /* 仍建议搭配使用，双重保障 */
}⚠️ 注意事项与最佳实践：
- 不要仅依赖 height: 100%：它要求所有祖先元素（包括 , ）均有明确高度，否则会失效。你的 Grid 行高由 grid-template-rows: repeat(2, 50%) 定义，已满足条件，无需额外处理。
- 避免滥用 !important：上述方案均无需 !important，应优先通过 CSS 特异性（如 .grid-container img）覆盖 Divi 默认样式。
- 响应式增强：为适配不同屏幕，建议补充 max-width: 100%; height: auto; 防止图片溢出，并结合 object-fit 控制缩放行为：
.grid-container img { display: block; width: 100%; height: 100%; object-fit: cover; /* 填满且裁剪 */ /* 或 object-fit: contain; */ /* 完整显示，可能留白 */ } - Divi 集成提示：将上述 CSS 粘贴至 WordPress 后台 → 外观 → 自定义 → 额外 CSS 即可生效，无需修改主题文件或使用 JavaScript。
通过以上任一方案，你的 Zigzag 网格中每个 .grid-img-* 容器将严格贴合内部图片尺寸，彻底消除底部间隙，确保两行四列的视觉节奏精准、专业。这不仅是 Divi 用户的实用技巧，更是现代 CSS 布局中必须掌握的基础原理。
