<a> tag is not at the same size of <img> tag inside it

Question

I have the following basic HTML content:

<div>
    <a href="...">
        <img src="..." width="81" height="75" ... />
    </a>
</div>

De-facto, the height of the "A" tag is only 19px, while the image element is set to 75px.

Even when I set the height of the "A" tag manually to 75px, it doesn't get set and stays as is.

The "DIV" element surrounding the "A" tag gets the exact dimensions of the "IMG" element, without setting it manually or anywhere.

The browser is Chrome, latest version.

How do I set the height of the "A" tag correctly, so it always covers (automatically) the entire "IMG" element??

Answer 1

Try adding display:inline-block to the <a> element.

Answer 2

If the inline-block declaration is not enough, check the line-height…

<a href="" style="line-height: 1;">
   <img src="logo.jpg" alt="logo">
</a>