<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

的空格 我只是想知道为什么锚标签不会增大其大小以适应图像。如您所见，图像溢出。我明白，如果我有“显示：内联块”，我会解决这个问题，但我想知道为什么会发生这种情况，因为当你在锚标签里面有文字时，该区域会根据其内容增长，如下图所示

Answer 1

您可以将<a>代码设置为{ display: block; }

Answer 2

a底部的空格是img的行高

a img {
  line-height: 0;
}

或者你也可以设置img display：block if if a display block too