Block <a> not behaving like <div> [duplicate] - css

Question

This question already has answers here:
What elements can be contained within a <a> tag?
(6 answers)
Closed 3 years ago.
I'm trying to create a card for a website I'm pulling together. On hover, some text slides into view (I've used :hover combined with max-height). To make the whole card clickable, I tried to change a <div> to <a>, I added display:block.
I'm surprised that the behaviour is different - I expected them to be the same.
Two questions:
How do I get the right behaviour - simply making the card clickable without JavaScript.
What is the underlying issue that I've missed?
This version has the <div>:
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<div href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author">WO J Wright</li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</div>
</article>
This version changes the <div> to a <a>.
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<a href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author">WO J Wright</li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</a>
</article>

Answer 1

Actually you can have block elements inside <a> tag, as you already said, just replacing the nested <a> tag inside .meta-author with a span, makes your last snipped works.
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<a href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author"><span>WO J Wright</span></li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</a>
</article>