Quick question and a very simple HTML CSS question but I'm not getting it.
Here is my image rendering inside of a tag.
I don't really understand why there's a gap kind of padding-bottom in the aside which is not allowing my image to sit on the bottom => just like it would be bottom:0 if we were talking about position: absolute (which is not the case tho). Here's the code:
<aside
class="aside"
>
<h1>This is the aside</h1>
<h2
>
Join this great community!
</h2>
<div class="link-container">
<a
class="link"
href="https://app.redpadel.com"
> Link </a
>
</div>
<div class="icon-container">
<svg
width="160"
height="161"
viewBox="0 0 160 161"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.9859 35.5114C12.9859 35.5114 14.7383 71.4143 37.308 84.3381C53.2318 93.4563 73.9771 87.9876 73.4958 75.7778C73.2413 69.3196 66.3035 68.1061 62.0894 70.5929C54.473 75.0874 59.0025 94.4066 67.3688 102.896C96.385 132.339 151.835 110.545 151.835 110.545"
stroke="white"
stroke-width="2"
stroke-linecap="round"
/>
<path
d="M147.668 119.084L152.597 110.624L143.688 104.809"
stroke="white"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div
class="img-container"
>
<img
class="image"
:src="require('../assets/img/capsule_member.jpg')"
alt="Padel team"
/>
</div>
</aside>
<style scoped>
aside {
background: rgb(19, 20, 21);
width: 90%;
margin: 0;
padding: 0;
}
.link {
color: #fff;
text-decoration: none;
}
.image {
width: 100%;
height: 100%;
margin: 0;
}
.img-container {
margin: 0;
padding: 0;
}
</style>
The body is set to margin & padding: 0
