Witam. Mam tak opisaną klasę:
.article
{
width: 25%;
height: 30vh;
text-decoration: none;
color: #000000;
background-color: #C9C9C9;
display: flex;
flex-direction: column;
align-items: center;
}
.article > img
{
width: 90%;
}
.article > p
{
width: 87%;
}
<a href="" class="article">
<img src="photos/1.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra leo eu nisi mattis, id tincidunt nisl suscipit. Ut aliquam.</p>
</a>
i wyświetla mi się to w ten sposób:
Ktoś może mi wytłumaczyć dlaczego background-color nie "rozlewa się" na cały link?
Jak dodaję background-color: inherit; do .article > p to pozostaje taki mały pasek między tekstem a obrazkiem.