flexbox 设置 `gap: 0` 和 `margin: 0` 后仍出现微小行间距，通常源于内联元素（如 ``）的默认基线对齐行为及未重置的父容器尺寸，而非 css 间隙属性本身失效。
在使用 Flexbox 构建图像画廊（如 600×300 像素封面图网格）时，即使显式声明 gap: 0, margin: 0, padding: 0，仍可能观察到不可忽视的垂直缝隙（尤其在 flex-wrap: wrap 下多行排列时）。这并非 Flexbox 的 bug，而是由以下两个关键因素共同导致：
? 1. ![如何彻底消除 Flexbox 布局中意外的行间间隙？]()
是内联级替换元素，默认 vertical-align: baseline
浏览器会为 保留基线下的空白区域（用于容纳字母如 g, y, q 的下伸部分），该空间在父容器（如 .vWrap）未设置明确高度或对齐方式时，会外溢并影响 Flex 行高计算，最终表现为“看不见的间隙”。
✅ 解决方案：
为所有图像添加 vertical-align: top 或 vertical-align: middle，或直接设为 vertical-align: bottom：
.gallery img {
vertical-align: top; /* 关键修复 */
display: block; /* 可选：进一步消除内联间隙 */
}? 2. 包裹容器（.vWrap）未定义尺寸，导致 Flex 项目收缩/拉伸异常
虽然 标签中设置了 width="600" style="max-width:90%"，但这些是HTML 属性，仅控制图像渲染尺寸，并不约束其父元素 .vWrap 的盒模型尺寸。Flex 项目（即 .vWrap）若无显式宽高，在 flex-wrap: wrap 下可能因内容换行、字体度量或默认 min-width: auto 行为产生不可预测的包裹与间距。
✅ 推荐做法：
为 .vWrap 显式设定宽高，并关闭内容溢出干扰：
.vWrap {
width: 600px;
height: 300px;
flex: 0 0 auto; /* 防止缩放，确保严格按尺寸排列 */
margin: 0;
padding: 0;
}
/* 同时重置 img 的默认行为 */
.vWrap img {
width: 100%;
height: 100%;
object-fit: cover; /* 可选：保持比例填充 */
display: block;
vertical-align: top;
}✅ 完整优化后的 CSS 示例：
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.vWrap {
width: 600px;
height: 300px;
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.vWrap a,
.vWrap img {
display: block;
width: 100%;
height: 100%;
}
.vWrap img {
vertical-align: top;
object-fit: cover;
}⚠️ 注意事项：
- 不要依赖 HTML 中的 width/height 属性来控制布局结构；CSS 控制更可靠且可继承；
- 避免在 .vWrap 中使用 inline-block 或未重置的 font-size（父级 font-size: 0 可临时消除间隙，但非最佳实践）；
- 若需响应式适配，建议用 clamp() 或媒体查询替代固定像素值，但务必同步调整 .vWrap 尺寸以维持行列一致性。
通过以上两步——重置图像对齐方式 + 显式定义包裹容器尺寸——即可彻底消除 Flexbox 中“幽灵间隙”，实现真正紧贴的图像网格布局。
