设置0间距的Flexbox行间仍存在小间隙问题求助

我尝试用Flexbox展示一批600×300尺寸的图片，已经给.gallery设置了gap:0和margin:0，但图片行间还是有小间隙（截图显示图片上下行之间存在细微空隙）。

我的.gallery CSS代码如下：

.gallery {
  display: flex;
  width:100%;
  height:100%;
  flex-wrap:wrap;
  justify-content: center;
  gap:0px;
  margin:0px;  
}

填充Flexbox的HTML是通过PHP遍历目录生成的，每个目录对应一个带cover.jpg的可点击链接。我没给.vWrap设置样式，也试过显式给它加margin:0和padding:0，但问题依旧。对应的HTML/PHP代码如下：

<body>
    <!-- (B) VIDEO GALLERY -->
    <div class="gallery">
        <?php
        // (B1) 获取视频目录
        $vid = glob(__DIR__ . '\*' , GLOB_ONLYDIR);

        usort($vid, function ($file1, $file2) {});
      
        // (B2) 输出目录对应的图片链接
        if (count($vid) > 0) { 
            foreach ($vid as $v) {
                $file = str_replace("'", "&#39;", basename($v));
                // 排除指定目录
                if (str_contains($file,'Era') or str_contains($file,'VideoGallery') or str_contains($file,'Streaming')) {}
                else {
                    printf("<div class='vWrap'>
                        <a href='$file'><img src='$file\cover.jpg' width='600' height='300'></a>
                    </div>");
                }
            }
        }
        ?>
    </div>
</body>

解决办法 #

1. 修正图片的行内元素对齐问题 #

图片默认是行内元素，会和文本基线对齐，导致底部出现细微间隙。给图片添加CSS：

.gallery img {
  display: block; /* 转为块级元素消除对齐间隙 */
}

或者保留行内元素但强制底部对齐：

.gallery img {
  vertical-align: bottom;
}

2. 明确设置.vWrap的尺寸与边距 #

给容器设置固定尺寸并清除默认边距：

.gallery .vWrap {
  width: 600px;
  height: 300px;
  margin: 0;
  padding: 0;
}

3. 调整Flex容器的对齐方式 #

Flex容器默认align-items: stretch，若子元素有隐藏的内边距/边框可能引发间隙，显式设置为顶部对齐：

.gallery {
  align-items: flex-start;
}

4. 验证图片实际尺寸 #

确认cover.jpg的实际像素为600×300，避免浏览器缩放导致间隙。可通过浏览器开发者工具查看图片渲染尺寸。

内容的提问来源于stack exchange，提问作者Nostrildumbass