title: How to turn a img into a link and have the <a> tag be the height of the image it contains
body: <p>This is the html i have:</p>
  
  <pre><code>&lt;a id="test" href="monogram/index.html"&gt;
          &lt;img src="img/MonogramApartmentNS.png" alt="The image"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>This is the css:</p>
  
  <pre><code>#test {
    display: inline-block;
    width: 40.0rem;
  }
  
  #test img {
    width: 100%;
  }
  </code></pre>
  
  <p>The image link works. In css I set the  to display as an inline-block, but the height of the  doesn't match the height of the img. It's 5px higher then the image it contains. How do i get the  to be the exact same height as the image it contains? I need this because I am using borders around the  tag.</p>
  
  <p>A few images:
  <a href="https://i.stack.imgur.com/gdcpu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gdcpu.jpg" alt="The height of the image"></a></p>
  
  <p><a href="https://i.stack.imgur.com/t48Qm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t48Qm.jpg" alt="The height of the link"></a></p>