Why is there a strange space beneath my image?

There is a weird space underneath my image. I just want a small space but however i change it, it's still as big or bigger which is extremely annoying. What is the problem?

I tried adding display: block to img {} but the space got bigger.

<!DOCTYPE html>
<html>
<head>
  <title>Main Page of Canada</title>
  <style>
    /* CSS code for fading image */
    .image-container {
      display: block;
      justify-content: center;
      align-items: center;
      height: 100vh; /*<-- Remove */
      overflow: hidden;
      position: relative;
    }
    
    img {
    display: inline-block;
      max-width: 100%;
      max-height: 100%;
      opacity: 1;
      transition: opacity 0.5s;
    }
    
    img.fade-out {
      opacity: 0;
    }
    
    /* CSS code for navigation bar */
    nav {
      background: #333;
      height: 50px;
      text-align: center;
    }
    
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    nav ul li {
      display: inline-block;
    }
    
    nav ul li a {
      display: block;
      color: #fff;
      text-decoration: none;
      padding: 15px 20px;
    }
    
    /* CSS code for sections */
    section {
      padding: 50px;
      margin: 0;
    }
    
    /* CSS code for main page section */
    #main-page {
      margin-top: 0;
    }

    /* Responsive Styles */
    @media screen and (max-width: 768px) {
      section {
        padding: 30px;
      }
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // JavaScript code for fading image on scroll
    $(document).ready(function() {
      var scrollTimeout;
      $(window).scroll(function() {
        clearTimeout(scrollTimeout);
        if ($(window).scrollTop() < $(window).height() - 50) {
          $('img').addClass('fade-in').removeClass('fade-out');
        } else {
          scrollTimeout = setTimeout(function() {
            $('img').addClass('fade-out').removeClass('fade-in');
          }, 250);
        }
      });
    });
  </script>
</head>
<body>
  <div class="image-container">
    <img src="(image)" alt="Canada Header Image">
  </div>
</body>
</html>

Here is my code. I'm not sure what the problem is, so if someone could help me, I would be extremely grateful. I don't really see a problem with my code because I tried every singe solution that could exist and this is extremely annoying. I need to get this done in a few weeks.

Solution

The problem isn't the image, the problem is the div with the .image-container class surrounding the image.

You set it with height: 100vh;, which will make it as big as the height of the screen

Just remove that line from the CSS, and the space will go away.