the space of <a> tag does not fit into its content like <img> tag

Question

Here is code

<a href="#" style="background-color:red; padding:30px;">
<img src="cat.jpg" style="width:150px; vertical-align:bottom;"/></a>

This code would result in the following picture

I am just wondering why the anchor tag does not grow its size to fit into the image. As you can see, the image overflows. I understand that if i have "display:inline-block", I will get this problem solved, but I want to know why this happens because when you have text inside anchor tag, the area will grow based on its content as the following picture

Answer 1

You can set the <a> tag to { display: block; } { display: block; }

Answer 2

The space at bottom of a is line-height of img

a img {
  line-height: 0;
}

Or you also can set img display: block if a display block too