Background-color znacznika a

Question

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.

Answer 1

Problemem jest prawdopodobnie to, że masz ustawioną wysokość na 30vh.

Comments

Faktycznie, dzięki wielkie