Si effettivamente non mi ero accorto, è un piccolo problema relativo al testo mancante nell'anchor che crea una sorta di spazio non voluto. Ti mando anche delle modifiche relative all'effetto di apertura e chiusura dell'imagine con un effetto di fade-in fade-out che rende il tutto più gradevole alla vista.

Modifiche CSS:

codice:
 #gallery {
            user-select: none;
        }

        #gallery a {
            font-size: 0;
        }

        #preview {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.5);
            user-select: none;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity .2s ease;
        }

JS

codice:
        const gallery = document.getElementById('gallery')
        const preview = document.getElementById('preview')
        const previewClose = document.getElementById('previewClose')
        const imgPreview = document.createElement('img')

        gallery.addEventListener('click', (e) => {
            e.preventDefault()
            imgPreview.setAttribute('src', e.target.parentElement.attributes[0].value)
            preview.appendChild(imgPreview)
            preview.style.setProperty('display', 'flex')
            preview.style.setProperty('opacity', '1')
        })
        previewClose.addEventListener('click', () => {
            preview.style.setProperty('opacity', '0')
            setTimeout(() => {
                preview.removeChild(imgPreview)
            }, 200)
        })