flexbox 设置 `gap: 0` 和 `margin: 0` 后仍出现微小行间距，通常源于内联元素（如 ``）的默认基线对齐行为及父容器未显式约束尺寸所致；解决关键在于统一子项盒模型、禁用文本相关对齐，并确保尺寸严格可控。
在使用 Flexbox 构建图像画廊（如 600×300 像素缩略图网格）时，即使明确声明 gap: 0、margin: 0、padding: 0，仍可能观察到不可忽视的垂直间隙（尤其在多行换行时）。这并非 CSS gap 属性失效，而是由以下两个深层原因共同导致：
? 根本原因分析
- <img> 是内联级替换元素：默认 vertical-align: baseline，会与行内文本基线对齐，导致底部留出约 4–5px 的“空白间隙”（源自字体 x-height 下方的预留空间）；
- .vWrap 容器尺寸未显式定义：虽然 <img> 标签内设了 width="600" 和 height="300"，但这仅作用于图像渲染尺寸，其父元素 .vWrap 仍为 display: block（默认）且无固定宽高——Flex 子项若未设定明确尺寸或未脱离文档流上下文，浏览器会基于内容（含内联间隙）计算高度，进而影响 flex-wrap 的行高判定。
✅ 正确解决方案（推荐组合）
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0; /* 可省略，因已设 0 */
margin: 0;
padding: 0;
}
/* 关键修复：重置所有子项行为 */
.gallery > .vWrap {
flex: 0 0 600px; /* 固定宽度，禁止伸缩 */
height: 300px; /* 显式高度，避免基线干扰 */
margin: 0;
padding: 0;
}
/* 消除图片基线间隙的核心 */
.gallery > .vWrap img {
display: block; /* 转为块级，移除 inline 对齐影响 */
width: 100%; /* 响应式填充 */
height: 100%;
object-fit: cover; /* 可选：保持比例裁剪 */
vertical-align: top; /* 备用方案（若需保留 inline） */
}? 补充说明：display: block 是最简洁可靠的解法；若必须保留 <img> 为内联元素（如需文字环绕），则改用 vertical-align: top/middle/bottom 或 font-size: 0 于 .vWrap 上亦可消除间隙。
? 注意事项与最佳实践
- 避免在 HTML 中硬编码 width/height 属性：它们仅设置固有尺寸，不参与 CSS 盒模型控制；应统一交由 CSS 管理（如上例），便于响应式维护；
- 检查继承样式：确认 <body>、<div> 等祖先元素无意外 line-height、font-size 或 margin-bottom 影响；
- 验证 HTML 结构：确保 PHP 循环输出无空格/换行符被解析为文本节点（虽现代浏览器对 Flex 子项中的空白节点处理较宽容，但仍建议模板中紧凑书写）；
- 调试技巧：在开发者工具中临时添加 outline: 1px solid red 到 .vWrap 和 img，直观查看实际占用区域。
通过以上调整，.gallery 将实现真正严丝合缝的零间隙图像网格布局——无论单行或多行，每张图均精准占据 600×300 像素空间，无任何意外偏移或空白。
