why is my image not touching the border of this aside?

June 11, 2022

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