Как исправить заполнение CSS ссылки на изображение? [дубликат] ⇐ Html

[Anonymous]

У меня есть веб-сайт, размещенный на GitHub Pages.
Я хочу избавиться от пространства между изображением и его легендой. Пробовал играть с отступами и полями для элементов ссылки, но безрезультатно. Что именно мне следует сделать?

Код: Выделить всё

[url=/plants/duckweed.html]
[img]/assets/img/duckweed.jpg[/img]
[/url]
Duckweed


[url=/plants/guppy-grass.html]
[img]/assets/img/guppy-grass.jpg[/img]
[/url]
Guppy Grass

Код: Выделить всё

.viewlets {
display: flex;
gap: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
}

.viewlets > .product {
flex-basis: 230px;
align-self: flex-start;
flex-grow: 2;
}

.product {
border:1px solid #d0d7de;
}

.product_desc{
padding:10px;
}

.product_status {
background:#f6f8fa;
border-top:1px solid #d0d7de;
padding:10px;
}

.product_image {
display: block;
margin-left: auto;
margin-right: auto;
object-fit: cover;
}

Предполагаемый результат: изображение должно быть на одном уровне с границей легенды.


Подробнее здесь: https://stackoverflow.com/questions/797 ... image-link