flexbox 设置 `gap: 0` 和 `margin: 0` 后仍出现微小行间距，通常源于内联元素（如 ``）的默认基线对齐行为及未重置的父容器尺寸，而非 css 间隙属性本身失效。

在使用 Flexbox 构建图像画廊（如 600×300 像素封面图网格）时，即使显式声明 gap: 0, margin: 0, padding: 0，仍可能观察到不可忽视的垂直缝隙（尤其在 flex-wrap: wrap 下多行排列时）。这并非 Flexbox 的 bug，而是由以下两个关键因素共同导致：

? 1. 是内联级替换元素，默认 vertical-align: baseline

浏览器会为 保留基线下的空白区域（用于容纳字母如 g, y, q 的下伸部分），该空间在父容器（如 .vWrap）未设置明确高度或对齐方式时，会外溢并影响 Flex 行高计算，最终表现为“看不见的间隙”。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

✅ 解决方案：
为所有图像添加 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 中“幽灵间隙”，实现真正紧贴的图像网格布局。