在该站点上尝试了所有方法，但是img下面的空格仍然存在

Question

我知道这个问题已经被问过很多次了，但是我觉得我已经用尽了所有解决方案，不知道该怎么办。

添加图像时，会有太多空白。我放置在页面上的其他任何图片都没有发生这种情况。我试过在img和容器标签，垂直内联顶部/底部等上添加“ display：block”，在容器标签上将line-height：0设置为img的float属性，您将其命名为我尝试过的而且没什么用。

有趣的是，当我设置宽度：200 px时，图像变得很小，但空白消失了。大于那个，我得到空白。我显然不能在我的网站上使用小图片。请尽我所能，请帮忙。

 <main>

    <section id="banner"> 
    <h1>The Pet Hospitals</h1>
    <h2>we know pets</h2>
    <img src="images/doggo2.png" alt="dog">
</section>


<section class="welcome">
    <h1>welcome!</h1>
    <img src="images/logo4.png" alt="logo">
      <div class="container">
         <div>
           <h2>First visit? Don't be skittish.</h2>
           <p>All new clients can enjoy a free first exam by mentioning 
this     
                   offer. We also provide discounted vaccination and 
treatment                              packages for puppies and kittens to 
start them on the right paw!
        </p>
                 </div>
         <div>
                   <h2>Boarding, Grooming & Doggie Daycare</h2>
           <p>We offer a full spectrum of boarding, grooming & doggie daycare services. Whether       
                   it's a day at the spa, a day of play, or a longer staycation, your pet is in good                           hands.</p>
             </div>
         <div>
                    <h2>Refill Prescriptions</h2>
        <p>You're busy, so we make refills easy. We also competitively price match all of                         your pet's medications. Request a refill via our Chat Now feature or give us a              call and we'll hop on it.</p>
                 </div>
     </div>
       </section>


<section class="wants">
     <img src="images/dogcat.png" alt="doggo">
          <div class="wantstext">
           <h2>They know what they want. We know what they need</h2>
           <p>Fur babies know how to give you the irresistible eyes when they                              want a treat, but they don’t always know how to tell you that                           something’s wrong. Our team of 20+ doctors love animals and speak                               their language – we know pets. You can count on us to be thorough,                              respect your time and budget, and only recommend what’s best for                                your pet. </p>
          </div>
</section>

<div id="wrapper">
        <div class="square"></div>
        <div class="squaredos"></div>
        <img src="images/vet.png" alt="vet">
</div>
</main>



<?php get_footer(); ?>


.wants img {
position: relative;
left: 80px; 
bottom: 50px;
height: 450px;
margin: 25px;
}

.wantstext {
font-size: 20px;
font-family: 'Sentinel', Georgia, serif;
position: relative;
bottom: 400px;
left: 430px;
margin: auto;
width: 40%;
}

#wrapper {
width: 80%;
margin: auto;
display: block;
line-height: 0;

}

#wrapper img {
display: block;
width: 200px;
}

.square {
height: 400px;
width: 400px;
background-color: hsl(166, 87%, 45%);
float: left;
}

.squaredos {
height: 400px;
width: 400px;
background-color: hsl(166, 50%, 45%);
float: right;
position: relative;
left: 50px;
}

#site-footer {
background: hsl(166, 87%, 45%);
width: 100%;
height: 110px;
margin-bottom: 0;
clear: both;
}

body, html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}