I am currently attempting to utilize a flexbox in order to display several 600x300 images, however, I am encountering an unexpected small gap between the rows despite specifying a 0 gap and margin. Here is a screenshot for reference:
.gallery {
display: flex;
width:100%;
height:100%;
flex-wrap:wrap;
justify-content: center;
gap:0px;
margin:0px;
}
The HTML implementation to populate the flexbox involves iterating through a list of directory names, extracting a cover.jpg from each directory, and embedding a clickable hyperlink to the respective directory with that image. While there is no explicit handling of vWrap in the CSS, attempts have been made to explicitly set margins and padding to 0 as well.
<body>
<!-- (B) VIDEO GALLERY -->
<div class="gallery"><?php
// (B1) GET VIDEO FOLDERS
$vid = glob(__DIR__ . '\*' , GLOB_ONLYDIR);
usort($vid, function ($file1, $file2) {});
// (B2) OUTPUT FOLDERS
if (count($vid) > 0)
{
foreach ($vid as $v)
{
$file = str_replace("'","'",basename($v));
//Can exclude certain directories this way
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>