title: Image inside link tag
body: <p>Hi i am creating a website while placing brand logo inside link tag at top right of web page i encountered this problem</p>
  
  <pre><code>       &lt;a href="#" &gt;
            &lt;img src='img.png'&gt;
  
         &lt;/a&gt;
  
         img {
             height: 50px;
             width: 50px;
           }
  </code></pre>
  
  <p>The result is <strong><em>a tag</em></strong> the wrapping image height is actually <strong>more than 50px</strong> even though there is no text in <strong><em>a tag</em></strong> . But when i give <strong><em>font-size:0</em></strong> it Works .</p>
  
  <p>So I need the reason what causes the link tag to take more height.</p>
  
  <p>Please help me understand this concepts rather than just with some css codes</p>
  
  <p>I have sample its . please help me with this .</p>
  
  <p><a href="http://jsfiddle.net/amerrnath/TLBEx/" rel="noreferrer">http://jsfiddle.net/amerrnath/TLBEx/</a></p>
  
  <p>Ok Sorry i got the answer from the link .</p>
  
  <p><a href="https://stackoverflow.com/questions/3197601/white-space-at-bottom-of-anchor-tag">White space at bottom of anchor tag</a></p>
  
  <p>Thank you </p>